如何使圖像適合div容器？

Question

我有一個問題。

http://img831.imageshack.us/img831/2111/18435469.png

在這裏你可以看到一個形象並不適合容器。 如果寬度，高度固定，但這種佈局靈活，並且在調整瀏覽器窗口大小時圖像高度+寬度發生了變化，那麼很容易。

也許有一種簡單的方法用Javascript來做到這一點？

CSS：

.photo:nth-child(4n+1) { 
background:#ff0000; 
max-width:100%; 
margin: 0; 
clear: both; 
} 

.photo:nth-child(4n+2) { 
background:#EEE; 
max-width: 33.33%; 
min-height: 300px; 
float:left; 
margin: 0; 
} 

.photo:nth-child(4n+3) { 
background:#AAA; 
max-width: 33.33%; 
min-height: 300px; 
float:left; 
margin: 0; 
} 

.photo:nth-child(4n+4) { 
background:#CCC; 
max-width: 33.33%; 
min-height: 300px; 
float:left; 
margin: 0; 
} 
.photo:nth-child(4n+1) img { 
width: 100%; 
} 

.photo:nth-child(4n+2) img { 
max-width: 100%; 
max-height: 100%; 
} 

.photo:nth-child(4n+3) img { 
max-width: 100%; 
max-height: 100%; 
} 

.photo:nth-child(4n+4) img { 
max-width: 100%; 
max-height: 100%; 
} 

PHP代碼：

<div class="photo"> 
<img class="group2" href="uploads/'.$row[2].'" src="uploads/'.$row[2].'"/> 
</div> 

Answer 1

使用以下的jQuery ....

$(document).ready(function(){ 
var height = $(".photo").height(); 
var width=$(".photo").width(); 
$(".group2").attr("height",height); 
$(".group2").attr("width",width); 
}); 

這將讓的高度&寬度，並分配給圖片。所以圖像適合

注意。 最好總是使用id來獲得高度和寬度。

Answer 2

這個工作對我來說，只有CSS：

包含分區：

.image_holder { 
overflow:hide; 
} 

圖像：

.image_holder img { 
height: 100%; 
max-width: 150%; 
width: auto; 
}