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

有没有更好/不同的方法来实现这一目标？

小提琴

这是一个可以玩的示例：小提琴

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