Изменение размера по высоте jquery.panzoom

Question

Im пытается выяснить, как сделать изображение, которое больше, чем масштаб окна браузера (2000x2800px) при инициализации jquery.panzoom. Мне нужно изображение для изменения размера, чтобы оно соответствовало высоте контейнера.

Заканчивать этот jsFiddle: http://jsbin.com/raxejirubayu/1/edit?html,css,js,output

Любой человек с любым опытом использования panzoom в состоянии помочь мне? Виртуальное пиво и персики даны взамен.

Answer 1

Я исправил эту проблему, написав этот код javascript, в основном вычисляет параметры масштабирования и панорамирования в соответствии с размером изображения и размером контейнера и применяет преобразования, так что изображение растягивается до границы контейнера.

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> 

Он вытянут вдоль ширины или высоты, в зависимости от ориентации изображения (портрет или пейзаж), но если вы хотите, чтобы растянуть только по высоте, то вам необходимо заменить

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

с

zoom_factor = container_height/image_height; 

, но я рекомендовал бы против него, потому что он не сможет обрабатывать ландшафтные изображения.