比例圖像縮放

Question

我有一個已知大小的div，並且鏈接到一些隨機大小的圖像，我想在這個div內顯示。我希望圖像具有比例縮放比例，儘可能大，但不能大於div（或者圖像寬度應該等於div的寬度，或者圖像高度應該等於div的高度，但我不完全知道是哪種情況） 。

我怎麼能只使用html，css，javascript和jquery？ 這將是很大的不讀圖像的大小。

Answer 1

您可以通過將max-width和max-height設置爲100％來完成純CSS操作。這是一篇很好的文章，可閱讀這個主題：http://unstoppablerobotninja.com/entry/fluid-images。本文還討論瞭如何處理舊版本的IE。

下面是在行動CSS的一個例子 - http://jsfiddle.net/JamesHill/R7bAA/

HTML

<div id='div1'> 
    <img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' /> 
</div> 
<br /> 
<div id='div2'> 
    <img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' /> 
</div> 

CSS

#div1 
{ 
    height:100px; 
    width:200px; 
    background-color:Gray; 
    border: 1px solid Black; 
} 
    #div2 
{ 
    height:500px; 
    width:100px; 
    background-color:Gray; 
    border: 1px solid Black; 
} 
.myImageClass 
{ 
    max-height:100%; 
    max-width:100%; 
} 

Answer 2

下面是計算圖像和容器的縱橫比，並設置一個JavaScript方法相應的高度或寬度值將首先碰到邊緣，然後圖像按比例縮放另一個尺寸：

// pre-cache image 
var img1 = new Image(); 
img1.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg"; 
var img2 = new Image(); 
img2.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg"; 

function placeImage(imgObj, containerID) { 
    var container = $(containerID); 
    var imageAspectRatio = imgObj.height/imgObj.width; 
    var containerAspectRatio = container.height()/container.width(); 
    // figure out which dimension hits first and set that to match 
    if (imageAspectRatio > containerAspectRatio) { 
     imgObj.style.height = container.height() + "px"; 
    } else { 
     imgObj.style.width = container.width() + "px"; 
    } 
    container.append(imgObj); 

} 

$("#go").click(function() { 
    placeImage(img1, "#container1"); 
    placeImage(img2, "#container2"); 
}); 

你可以在這裏看到它在此的jsfiddle：http://jsfiddle.net/jfriend00/5K3Zf/