Image Grid Fluid Layout (Responsive)

Question

I am working on image grid(4 columns) with fluid layout. In jsfiddle currently the height is set to auto but it's not coming the way I am expecting because the image dimensions are different. The image size is not proportional after fixing the height. I know, it will work properly when image(width/height) will be equal but I don't want to do this because images will be coming dynamically(same width/different height). Is there any way it can be fixed for different image dimensions? Fiddle below

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

JSFiddle

Answer 1

I took a different approach. You said that the widths will remain the same, whereas the heights will vary. As opposed to floating each individual img, I think it's better (and easier) to place the imgs within a column, and float the columns, rather.

Live demo, try resizing the browser and stuff...

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 this together relatively quickly.. if you wanted to improve the layout, you could specify a different width for .image_box , and have columns overflow under the other columns.

Answer 2

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

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

You would have to provide a height that would work with the smallest possible image size.

Answer 3

i have tried a few changes in your css,

please find below jsfiddle

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