javascript - 调整大小以适合高度 jquery.panzoom

标签 javascript jquery resize zooming pan

我正在尝试弄清楚如何在初始化 jquery.panzoom 时制作比浏览器窗口 (2000x2800px) 大得多的图像。我需要图像自行调整大小,使其适合容器的高度。

查看这个 jsFiddle:http://jsbin.com/raxejirubayu/1/edit?html,css,js,output

任何有使用 panzoom 经验的人都可以帮助我吗?作为返回,虚拟啤酒和击掌。

最佳答案

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

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>

它根据图像方向(纵向或横向)沿宽度或高度拉伸(stretch),但如果您只想沿高度拉伸(stretch),则需要替换

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

zoom_factor = container_height / image_height;

但我不建议使用它,因为它无法处理横向图像。

关于javascript - 调整大小以适合高度 jquery.panzoom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26004008/

相关文章:

javascript - Webpack Tree-Shaking 动态导入似乎不起作用

javascript - 如何将此菜单的可点击区域限制为其文本?

java - 调整高 BufferedImage 大小时如何保持/偏爱某些像素值?

delphi - 如何使我的表单调整大小更顺畅?

javascript - 如何编写一个 websocket 客户端

javascript - 如果包装器包含特定元素,则替换 HTML 标记

Javascript 计算 - If 语句

javascript - CSS/JS 调整图形大小以适合图像大小

javascript - 忽略 JavaScript 日期中的 UTC

jquery - CSS绝对定位导致元素在不需要时堆叠