responsive images inside a full width div

问题

I have this markup:

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

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.

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)

I've found this picturefill

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.

Thanks!

回答1:

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/

回答2:

You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.

HTH

Francisco

来源：https://stackoverflow.com/questions/15822493/responsive-images-inside-a-full-width-div