Search code examples
javascriptjqueryhtmljquery.panzoom

set element fit into container in panzoom.js

I wanted to use panzoom.js. My image size is larger than container. I needed to make it fit into the container by default view.

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

Here the jsfiddle

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

Please help me to get it.

I have tried with "startTransform" value. But I needed it dynamically.

It should be calculated dynamically.

Image and container size might be changed

Solution

  • Try this:

    $(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/