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.