调整大小以适合高度jquery.panzoom

Question

我试图找出如何使图像比初始化jquery.panzoom时的浏览器窗口（2000x2800px）更大。我需要图像来调整自己的大小，以便它适合容器的高度。

看看这个的jsfiddle：使用panzoom能帮助我http://jsbin.com/raxejirubayu/1/edit?html,css,js,output

任何有经验吗？虚拟啤酒和highfives作为回报。

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; 

但我会建议反对，因为这将不能够处理图像的景观。