Display images side by side 100% screen

Question

I have a div in HTML, this div has width of 100%. In this div I have a lot of pictures, I want display them side by side.

Example:

Resolution of: 1000px (display 5 images side by side (200px width)) from 6 create a new row 

And that the pictures fill the white space on the screen, so a user can only see images and not a white background.

Thanks.

Answer 1

float the images and makes the 20% width..

<div class="container">
   <img src="1.jpg"/>
   <img src="2.jpg"/>
   <img src="3.jpg"/>
   <img src="4.jpg"/>
   <img src="5.jpg"/>
   <img src="6.jpg"/>
</div>

and css

.container{overflow:hidden;}
.container img{
    width:20%;
    float:left;
}

demo at http://jsfiddle.net/R5sq4/

---

update due to comment mentioning that on large screens the images would be too large..

So perhaps you want to set minimum/maximum widths for the images and force them to fill the page while respecting those limits..

You will need some scripting for this.

$(function(){
    var min = 200,
        max = 300,
        container = $('.container'),
        images = container.children('img');

    $(window).resize(function(){
        var w = container.width(),
            minfit = 100 / Math.floor(w / min),
            maxfit = 100 / Math.floor(w / max);


        images.css({width:Math.min(minfit,maxfit)+'%'});
    }).resize();
});

with this css

.container{overflow:hidden;}
.container img{
    float:left;
}

demo at http://jsfiddle.net/R5sq4/1/