CODEWITHSUNDEEP
htmlcssimage
robert
robert

Reputation: 841

Height attribute doesn't work on images?

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

Upvotes: 1

Views: 8508

Answers (3)

SoWhat
SoWhat

Reputation: 5622

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;
}

Upvotes: 4

random_user_name
random_user_name

Reputation: 26150

You don't need the px inside the height attribute of the image:

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

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46539

The height attribute expects a number in pixels. height='100' would be valid.
Or you can use CSS to explicitly specify pixels, for instance with an inline style="height:100px"
But don't mix up the two!

PS using a stylesheet is preferred these days.

Upvotes: 0

Related Questions