1

我有这个标记：

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

我找到了这个 图片填充

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

谢谢！

4

2 回答 2

1

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

高温高压

弗朗西斯科

于 2013-04-04T22:01:20.483 回答
0

如果您使用的是 Twitter Bootstrap，请像在Twitter Bootstrap 文档中一样正确使用标记：

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

于 2013-04-04T22:14:15.543 回答