全宽 div 内的响应式图像答案

【问题标题】：responsive images inside a full width div全宽 div 内的响应式图像
【发布时间】：2013-03-27 04:38:42
【问题描述】：

我有这个标记：

<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 张图像，我需要水平显示它们并让它们在每个分辨率下缩放。

谢谢！

【问题讨论】：

标签： css responsive-design media-queries image-scaling

【解决方案1】：

您可以将图片的样式width属性设置为25%，无需指定高度。如果你总是放 4 张图片，它们之间的宽度相同，并且你的容器 div 始终为 100%，这将起作用。

HTH

弗朗西斯科

【讨论】：

我尝试将图像设置为 25% 并删除高度：自动；但是如果我调整浏览器的大小，仍然会崩溃。
好吧，我刚试过，我必须注意两件事：1）不要在图像之间留空间，2）将此样式属性添加到您的容器 div：white-space: nowrap。对我来说，即使在调整浏览器大小时它也能正常工作。

【解决方案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/

【讨论】：