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

虽然在响应式容器中图像没有响应

2 个答案: