Zoom Levels #

Panzoom API allows you to zoom content to any specified scale value. For your convenience, Panzoom also provides fit, cover, full, max zoom levels and corresponding methods as zoomToFit, zoomToCover, etc.

Values #

fit #

The content is scaled to maintain its aspect ratio while fitting within the free space in the container. Other elements such as captions are also taken into account.

cover #

Content is sized to maintain its aspect ratio while filling the entire container. If the aspect ratio of the content does not match the aspect ratio of the container, the content will become draggable.

full #

Content is scaled to its original size.

max #

Content is scaled to its maximum size - original size multiplied by the value of the maxScale option. See examples below to better understand how the maxScale option affects zoom.

Examples #

If maxScale is equal to 1, user cannot zoom more than the original size of the image.

Here maxScale is equal to 5. Since click action is the default - toggleZoom - user can click to view image at its original size, and then user can additionally zoom to five times the original image size (using toolbar button, mouse wheel, and pinch-to-zoom gesture).

In this example, click action is set to iterateZoom and maxScale is 2.5. The content will be zoomed to its original size on the first click and then 2.5 times its original size on the second click.