设置元素适合 panzoom.js 中的容器

Question

我想使用 panzoom.js。我的图像尺寸大于容器。我需要让它在默认视图下适合容器。

<div class="container">
    <img id="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
</div>

这里是 jsfiddle

http://jsfiddle.net/Vipin/qam85n47/

请帮我拿下。

我试过 "startTransform" 值。但我动态地需要它。

应该是动态计算的

图像和容器大小可能会更改

Answer 1

试试这个：

$(function(){
    //get parent width height
    var w = $(".container").width();
    var h = $(".container").height();
    //set parent width height to panzoom element
    $("#panzoom").width(w)
    $("#panzoom").height(h)
    $("#panzoom").panzoom();
});

http://jsfiddle.net/cyril123/vfqdnm8d/2/

Answer 2

您可能想以这种方式处理它：

<div class="container">
    <img width="900" height="900" id="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>

.container img {
    width: 100% !important;
    height: 100% !important;
}

将图像宽度设置为 100%，动态并考虑图像大小和容器大小的变化

https://jsfiddle.net/qam85n47/11/

设置元素适合 panzoom.js 中的容器

set element fit into container in panzoom.js

html

javascript

jquery

jquery.panzoom