圖片不能順應雖然在響應容器

Question

我有以下幾點：

<div id="hp_imgs"> 
    <img src="/images/hp/1.jpg"> 
    <img src="/images/hp/2.jpg"> 
    <img src="/images/hp/3.jpg"> 
    <img src="/images/hp/4.jpg"> 
    <img src="/images/hp/5.jpg"> 
    <img src="/images/hp/6.jpg"> 
    <img src="/images/hp/7.jpg"> 
    <img src="/images/hp/8.jpg"> 
</div> 

時創建，形成了各種各樣的網格的圖像進行尺寸的，所以必須在它們的順序。

因此，當/如果調整頁面大小，我希望圖像調整大小並保持它們的位置。

這裏就是我想，但圖像只停留在相同的大小，而不是調整：

#hp_imgs { 
    width:66%; 
    float:left; 
} 

#hp_imgs img { 
    float:left; 
    margin:2px; 
    border-radius:4px; 
    display: block; 
    max-width:100%; 
    height:100%; 
} 

有沒有更好的/不同的方式來實現這一目標？

FIDDLE

這裏玩的例子：Fiddle

JSBin

JSBin

Answer 1

我傾向於設置這樣所有圖像的基礎CSS規則，使他們自動採取行動=

img { 
    width:100%; 
    height:auto; 
} 

通過這種方式，圖像保持基於父/容器寬度其寬高比，設置高度爲正確的比例大小調整大小時。

Answer 2

#hp_imgs { 
    width:66%; 
    float:left; 
    max-width:143px; 
    height:auto; 
} 

#hp_imgs img { 
    float:left; 
    margin:2px; 
    border-radius:4px; 
    display: block; 
    max-width:143px; 
    height:auto; 
    width:100%; 
}