HTML: Images floating left? - html

Question

I wanna make a page with lots of images being shown.
<style>
img{margin-bottom: 3px; float: left}
</style>
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
It looks good if they all have the same width and height.
But what happens when one of them has a larger size? It messes all the layout,
showing a white space that makes it look ugly.
How can this be fixed?

Answer 1

why don't you put width: 150px or whatever the size you want inside that css?
<style>
img{margin-bottom: 3px; width: 150px; float: left}
</style>

Answer 2

With a bit javascript you could bring them all to the same size. But it won't look much better.
Maybe the same width and a simple repeating background which won't be annoying would be a compromise.

Answer 3

Limit sizes
img {
max-width: 100px;
max-height: 100px;
border: 1px solid grey; /* show visible element size */
}
Sample:
http://jsfiddle.net/UqGW7/3/
Fixes sizes (strech)
img {
width: 100px;
height: 100px;
border: 1px solid grey; /* show visible element size */
}
Sample:
http://jsfiddle.net/UqGW7/4/
Crop images (using a wrapper)
<span class="wrapper">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/592211_21253884267_736366040_q.jpg" />
</span>
.wrapper {
width: 100px;
height: 100px;
display: inline-block;
overflow: hidden; /* crop larger images */
border: 1px solid grey; /* show visible element size */
text-align:center; /* center horizontally */
}
Sample:
http://jsfiddle.net/UqGW7/5/

Answer 4

If it is not very necessary to show the entire image you can consider placing your images in div tags, either as background images, centering them and then setting a fixed width and height for the div elements.
<style>
.imgpanel{
margin-bottom: 3px;
float: left;
background-repeat:no-repeat;
background-position:center;
width:200px;
height:200px;
}
</style>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
Or you can place the image within the div tags and set the overflow to hidden:
<style>
.imgpanel{
margin-bottom: 3px;
float: left;
width:200px;
height:200px;
overflow:hidden;
}
</style>
<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>
Optionally, you can use a thumbnail generation script to create images that are always the specific size you want, if re-sizing the image is okay. Check http://sourceforge.net for code samples of a thumbnail generator.