2

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Vinu Viswambharan
  • 61
  • 2
  • 7

2 Answers2

2

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/

Cyril Cherian
  • 32,177
  • 7
  • 46
  • 55
  • I can't change the size of element. I needed to change the zoom level. like "startTransform". Element height is given from server. Can't be changed it. Could be adjusted zoom level. – Vinu Viswambharan Jun 24 '15 at 09:34
2

You might want to approach it in this way:

<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;
}

Setting the image width to 100%, dynamic and accounts for changes in image size and container size

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

tvgemert
  • 1,436
  • 3
  • 25
  • 50
  • I can't change the size of element. I needed to change the zoom level. like "startTransform". Element height is given from server. Can't be changed it. Could be adjusted zoom level – Vinu Viswambharan Jun 24 '15 at 09:37
  • Might not be sure exactly what you mean. But reading from your first scentence "I needed to make it fit into the container by default view.". My adjusted answer could work. – tvgemert Jun 24 '15 at 09:48
  • I needed something like this https://jsfiddle.net/Vipin/fcc3ap0y/2/ I am not able to chage the size of image. Here, If I remove this code: $('#wrap').css('-webkit-transform', ' scale(' + 0.745 + ')'); It will change to actual size. – Vinu Viswambharan Jun 24 '15 at 12:33