Skip to content
On this page

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.