3

我有以下内容:

<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

4

2 回答 2

4

我倾向于为所有这样的图像设置一个基本的 CSS 规则,以使它们自动响应=

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

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

于 2013-06-30T22:04:12.080 回答
0
#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%;
}
于 2014-03-07T23:11:31.917 回答