Установить элемент вписывается в контейнер в 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/