Reputation: 484
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;
}
Upvotes: 4
Views: 6895
Reputation: 241278
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.
Upvotes: 2
Reputation: 130
i have tried a few changes in your css,
please find below jsfiddle
'http://jsfiddle.net/wFLJW/3/'
Upvotes: 0
Reputation: 161
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.
Upvotes: 0