jQuery調整高寬比爲

Question

如何將jQuery中的圖像調整爲一致的高寬比。例如，設置最大高度並使寬度正確調整。謝謝。

Answer 1

您可以手動計算這個，

即：

function GetWidth(newHeight,orginalWidth,originalHeight) 
{ 
if(currentHeight == 0)return newHeight; 
var aspectRatio = currentWidth/currentHeight; 
return newHeight * aspectRatio; 
} 

確保您使用的原始值的圖像否則會隨着時間的推移。

編輯：例如jQuery的版本（未測試）

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){ 
    var aspectRatio = $(this).data('aspectRatio'); 
    if (aspectRatio == undefined) { 
     aspectRatio = $(this).width()/$(this).height(); 
     $(this).data('aspectRatio', aspectRatio); 
    } 
    $(this).height(newHeight); 
    $(this).width(parseInt(newHeight * aspectRatio)); 
} 

Answer 2

使用JQueryUI Resizeable

$("#some_image").resizable({ aspectRatio:true, maxHeight:300 }); 

的aspectRatio：真 - >保持原始寬高比

Answer 3

這裏有可能會做一個有用的功能是什麼你想要：

jQuery.fn.fitToParent = function() 
{ 
    this.each(function() 
    { 
     var width = $(this).width(); 
     var height = $(this).height(); 
     var parentWidth = $(this).parent().width(); 
     var parentHeight = $(this).parent().height(); 

     if(width/parentWidth < height/parentHeight) { 
      newWidth = parentWidth; 
      newHeight = newWidth/width*height; 
     } 
     else { 
      newHeight = parentHeight; 
      newWidth = newHeight/height*width; 
     } 
     var margin_top = (parentHeight - newHeight)/2; 
     var margin_left = (parentWidth - newWidth)/2; 

     $(this).css({'margin-top' :margin_top + 'px', 
        'margin-left':margin_left + 'px', 
        'height'  :newHeight + 'px', 
        'width'  :newWidth + 'px'}); 
    }); 
}; 

基本上，它會抓取一個元素，將其居中放置在父元素中，然後對其進行拉伸以使父元素的背景都不可見，同時保持縱橫比。

然後再次，這可能不是你想要做的。

Answer 4

有沒有會計副本和貼紙的數量呃！我也想知道這一點，我看到的所有縮放寬度或高度都是無窮無盡的例子。誰會希望其他的溢出？！對於寬度，所以無論圖像

• 調整大小的寬度和高度，而不需要爲一個循環
• 不超過圖像原始尺寸
• 用途可以正常工作，即寬度/方面的高度的數學和高度*方面實際上適當放大和縮小：/

應該是直線前進足夠的轉換爲JavaScript或其他語言

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Width; 
    double srcHeight = img.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
}