@zsjs/resize-fit

---

title: resize-fit group: controllers subGroup: general

Instruction

This ResizeFit was designed to fit the upper container of a div, similar to the fit attribute of an image element.

Demos

fill

[resize-fit's demo](https://www.zsjs.fun/views/controlllers/resize-fit#fill)

contain

[resize-fit's demo](https://www.zsjs.fun/views/controlllers/resize-fit#contain)

fitHeight

[resize-fit's demo](https://www.zsjs.fun/views/controlllers/resize-fit#fitHeight)

fitWidth

[resize-fit's demo](https://www.zsjs.fun/views/controlllers/resize-fit#fitWidth)

fitWidthExtendHeight

[resize-fit's demo](https://www.zsjs.fun/views/controlllers/resize-fit#fitWidthExtendHeight)

install

npm install @zsjs/resize-fit;

Example

import { ResizeFit } from "@zsjs/resize-fit";

<div id="father" style="width: 400px;height: 300px;border: 1px solid green;">
  <div id="child" style="width: 100px;height: 200px;background-color: red;">
    <span style="font-size: 58px;">ResizeFit</span>
  </div>
</div>

const resizeFit = new ResizeFit();
resizeFit.init({
  container: document.getElementById("father"),
  target: document.getElementById("child"),
  mode: "contain", // fill | contain | fitHeight | fitWidth | fitWidthExtendHeight |
})

// before unmount
resizeFit.dispose();

Methods

dispose

Remove the listener of ResizeObserver.

example

resizeFit.dispose();