Multiple images fill screen width using CSS

Question

I have multiple images to show in a row that filled screen width:

<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">

In some pages I have 4 images but some have 5 , 6 , etc.

I don't want to change max-width for every pages so is that a way in CSS to take care of it?

ps I don't want to use table and background-image since a js plugin need find them as img, also img tag is google-friendly too...

Answer 1

There is no pure CSS way to solve it. Little jQuery can do it for you:

$(parentElem).each(function() {

    var itemsCount = $(this).children().length;
    var childrenWidth = 100 / itemsCount + '%';

    $(this).children().css('width', childrenWidth);

});

where parentElem is container for your images. jQuery each loop here in case you have multiple rows with images on your page.

Answer 2

I'd suggest you to use flexbox . It's really useful and can be mastered to make almost any kind of grid you want. Wrap all images in container class with display:flex and for each img element set flex:1 . This is the simplest way. If you need to adjust it, read about it, it's great! Example here

 .flexContainer { display:flex; max-height:200px; } .flexContainer > img { flex:1; border:1px solid; margin:1px; } 

 <div class="flexContainer"> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> </div> <br/> <div class="flexContainer"> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> </div>