Image Grid Fluid Layout (Responsive)

Question

I am working on an image grid (4 columns) with a fluid layout. In jsfiddle, the height is currently set to auto, but it doesn't fit as I expect, because the image sizes are different. Image size is not proportional after fixing the height. I know that it will work correctly when the image (width / height) is equal, but I do not want to do this because the images will be dynamic (same width / different height). Is there a way that it can be fixed for different image sizes? Script below

img{ width:100%; //height:150px; height:auto; } 

Jsfiddle

Answer 1

I used a different approach. You said that the width will remain unchanged, while the heights will vary. Unlike floating each individual img, I think it's better (and easier) to place imgs inside a column and rather float columns.

Live demo, try resizing your browser and more ...

HTML

 <div id="image_box"> <div class="col"> <img><img><img><img><img><img> </div> <div class="col"> <img><img><img><img><img><img> </div> <div class="col"> <img><img><img><img><img><img> </div> <div class="col"> <img><img><img><img><img><img> </div> <div class="col"> <img><img><img><img><img><img> </div> </div> 

CSS

 #image_box { width:90%; margin:0px auto; } .col { width:18%; float:left; margin:0px 1%; } img{ width:100%; height:auto; margin-top:6%; } 

I just threw it together relatively quickly. If you want to improve the layout, you can specify a different width for the .image_box and the column overflow under other columns.

Answer 2

One option is to limit the height of the img container. In your case, the elements are li.

 li { height: 100px; overflow: hidden; } 

You will need to specify a height that will work with the smallest possible image size.

Answer 3

I tried a few changes in your CSS,

find below jsfiddle

 'http://jsfiddle.net/wFLJW/3/'