Атрибут высоты не работает на изображениях?

Question

У меня тут немного нелепая проблема, и я, должно быть, упускаю что-то очевидное, но разочарование начинает одолевать меня, поэтому я надеюсь, что кто-то может указать на мою ошибку.

Я хочу отобразить уменьшенные изображения, которые имеют одинаковую высоту. Ширина не имеет значения. Мне нужно, чтобы они имели одинаковую высоту.

Почему не работает следующее?

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

Это CSS для класса smallpic div:

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

Отображаются правильные изображения, но вместо того, чтобы иметь одинаковую высоту 100 пикселей, они по какой-то причине все подходят под ШИРИНУ div.

Это страница с 4 примерами изображений, и, как вы видите, все они имеют одинаковую ширину и разную высоту!

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

Answer 1

Высота - количество пикселей на изображении

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

Вы также можете определить это в CSS

.smallpic>img{
    height:100px
}

Из вашего описания звучит так, как будто вы хотите, чтобы они были одинаковой ширины

Так что попробуйте:

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

Answer 2

Вам не нужен px внутри атрибута высоты изображения:

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

Answer 3

Атрибут height ожидает число в пикселях. height='100' будет действительным.
Или вы можете использовать CSS для явного указания пикселей, например со встроенным style="height:100px"
Но не путайте их!

PS использование таблицы стилей предпочтительнее в наши дни.