css - 全宽 div 内的响应式图像

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;

图像具有相同的宽度和高度，并内联显示。

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

我找到了这个 picturefill

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

谢谢!

Answer 1

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

HTH

弗朗西斯科