全宽div内的自适应图像 [英] responsive images inside a full width div

问题描述

我有这个标记:

<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):

and this css (I'm using Twitter Bootstrap) :

img {

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

}

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

The images have equal width and height and are displayed inline.

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

On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit. So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)

我找到了图片填充

我认为这对我有帮助，但是我认为这对于我的情况而言是一种更简单的解决方案，因为我需要4张图像，这些图像需要水平显示并使其在每种分辨率下均可缩放.

Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.

谢谢！

推荐答案

如果您使用的是Twitter Bootstrap，则可以像

If you are using Twitter Bootstrap, then use markup properly like in 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内的自适应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！