@zsjs/resize-fit v0.2.7

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

contain

fitHeight

fitWidth

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();