调整大小以适应高度jquery.panzoom

问题描述

在初始化jquery.panzoom时，我试图弄清楚如何制作比浏览器窗口（2000x2800px）更大的图像。我需要图像来调整自身大小，使其适合容器的高度。

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 will fit within the height of the container.

看看这个jsFiddle：

Check out this jsFiddle: http://jsbin.com/raxejirubayu/1/edit?html,css,js,output

任何有使用panzoom经验的人都可以帮助我吗？虚拟啤酒和高价啤酒作为回报。

Anyone with any experience using panzoom able to help me out? Virtual beers and highfives given in return.

推荐答案

我已经通过编写这个javascript代码解决了这个问题，它基本上计算了缩放根据图像大小和容器大小平移参数并应用转换，使图像拉伸到容器边界。

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文件

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

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

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

        //Get image dimensions
        var 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 factor
        var zoom_factor;

        //Check to determine whether to stretch along width or heigh
        if(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 zoom
        var 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 image
        var 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 image
        var 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文件

<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.

这篇关于调整大小以适应高度jquery.panzoom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！