Question

I have a bit of a ridiculous issue here and I must be missing something obvious, but frustration is starting to get the best of me so I hope someone can point out my error.

I want to display thumbnail images that all have the same height. Width is irrelevant. I need them to have the same height.

Why doesn’t the following work?

<div class='smallpic'><img src='imageurl' height='100px' title='photo' /></div>

This is the CSS for the smallpic div class:

.smallpic{
    width:120px;
    height:100px;
    margin:2px;
    float:left;
}

The correct images are displayed, but instead of having the same height of 100 px, they all fit to the WIDTH of the div for some reason.

This is the page, there are 4 sample images and as you see they all have the same width and different heights!

http://registry.bedbugs.net/United-States/Santa-Rosa/296-bed-bug-report-for-Hillside-Inn

Answer 1

Height is the number of pixels in the image

<div class='smallpic'><img src='imageurl' height='100' title='photo' /></div>

You can also define this in the css

.smallpic>img{
    height:100px
}

From you description, it sounds like you want them to be of the same width as well

So try:

 .smallpic>img{
    height:100px;
    width:100px;
}