調整大小以適合高度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; 

但我會建議反對，因爲這將不能夠處理圖像的景觀。