There is a nice CSS property to change any zoom you want and it is called with the same name (zoom), however it doesn’t work well at the same time with mouse dragging selections because of the references and the different implementations around browsers. What you can used instead is another familiar CSS property together with a reference. We are talking about scaling with the transform property and setting up its origin.
Easy zoom in, zoom out, normal zoom and zoom adjusted to the container with CSS and JS.
If you want to change the zoom, just add or subtract from the original zoom CSS property.
document.querySelector("#zoomin").addEventListener("click", function() {
$area.style.zoom = Number($area.style.zoom) + 0.2;
});
You can also set up maximum and minimum values to avoid infinite zoom.
To adjust an area or image to your container you need to divide the width or height depending of what you want to adjust.
document.querySelector("#zoomfix").addEventListener("click", function() {
$area.style.zoom = $container.offsetWidth / $area.offsetWidth;
});
Here a real example: