代码之家 › 专栏 › 技术社区 › agis

全宽div内的响应图像

image-scaling media-queries responsive-design css

agis · 技术社区 · 13 年前

我有这样的标记:

<div class="girls" style="text-align:center; margin-top:100px">
    <img src="images/1.png" />
    <img src="images/2.png" />
    <img src="images/3.png" />
    <img src="images/4.png" />

和这个css(我使用的是Twitter Bootstrap):

img {

    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;

}

这些图像具有相等的宽度和高度,并且以内联方式显示。

在我的分辨率上可以,适合整个宽度(1366px),但在较低的分辨率上,图像不适合。所以,我需要保持每个屏幕分辨率的比例(在我的情况下低于1366px)

我找到了这个 picturefill

我认为这对我有帮助,但我认为这是一个更简单的解决方案,因为我有4张图像,我需要将它们水平显示,并使它们在每个分辨率上缩放。

谢谢

2 回复 | 直到 13 年前

Francisco Zarabozo 13 年前

您可以设置样式 width 属性设置为25%,而不指定高度。如果你总是放4个图像,它们之间的宽度相同,并且你的容器div总是100%,那么这是可行的。

邻苯二甲酸

弗朗西斯科

Miljan PuzoviÄ 13 年前

如果您正在使用Twitter引导程序,那么请像中那样正确使用标记 Twitter Bootstrap documentation :

<div class="row-fluid">
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
<div>

http://jsfiddle.net/zNLBG/