Resizing To Fit Height Jquery.panzoom

Im trying to work out how to make an image that is way bigger than the browser window (2000x2800px) scale when initializing jquery.panzoom. I need the image to resize itself so it

Solution 1:

I've fixed this issue by writing this javascript code, it basically calculates the zoom and pan parameters according to the image size and container size and applies transformations such that the image is stretched to the container boundary.

Javascript file

$(document).ready(function(){
    $panzoom = $(".cimage").panzoom();

    //Wait for the image to load
    $('.cimage').load(function(){
        //Get container and imagevar image = $('.cimage');
        var container = $('.image-container');

        //Get container dimensionsvar container_height = container.height();
        var container_width = container.width();

        //Get image dimensionsvar image_height = image.height();
        var image_width = image.width();

        //Calculate the center of image since origin is at x:50% y:50%var image_center_left = image_width / 2.0;
        var image_center_top = image_height / 2.0;

        //Calculate scaling factorvar zoom_factor;

        //Check to determine whether to stretch along width or heighif(image_height > image_width)
            zoom_factor = container_height / image_height;
        else
            zoom_factor = container_width / image_width;

        //Zoom by zoom_factor
        $panzoom.panzoom("zoom", zoom_factor, {animate: false});

        //Calculate new image dimensions after zoom
        image_width = image_width * zoom_factor;
        image_height = image_height * zoom_factor;

        //Calculate offset of the image after zoomvar image_offset_left = image_center_left - (image_width / 2.0);
        var image_offset_top = image_center_top - (image_height / 2.0);

        //Calculate desired offset for imagevar new_offset_left = (container_width - image_width) / 2.0;
        var new_offset_top = (container_height - image_height) / 2.0;

        //Pan to set desired offset for imagevar pan_left = new_offset_left - image_offset_left;
        var pan_top = new_offset_top - image_offset_top;
        $panzoom.panzoom("pan", pan_left, pan_top);

    });
});

HTML file

<div class="image-container">
    <img class='cimage' src="abc.jpg'/>
</div>

It is stretched along width or height, depending upon image orientation (portrait or landscape) but if you want to stretch only along height then you need to replace

if(image_height > image_width)
    zoom_factor = container_height / image_height;
else
    zoom_factor = container_width / image_width;

with

zoom_factor = container_height / image_height;

but I would recommend against it because it would not be able to handle landscape images.