Question

我有这个标记：

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

}

图像具有相同的宽度和高度，并以内嵌方式显示。

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

我发现了这个picturefill

我觉得这对我很有帮助，但我认为这对我的情况来说是一个更简单的解决方案，因为我有4个图像，我需要水平显示它们并使它们在每个分辨率上缩放。

谢谢！

Answer 1

您可以将图像的样式width属性设置为25％，而不指定高度。如果你总是放4张图片，它们之间会有相同的宽度，你的容器div总是100％。

HTH

旧金山

Answer 2

如果您使用的是Twitter Bootstrap，请在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/

全宽div内的响应图像

2 个答案: