css - 尽管在响应容器中，图像没有响应

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;
}

这样，图像会根据父级/容器的宽度保留其纵横比，并在调整大小时将高度设置为正确的比例大小。