Реализация CSS + <img>webkit с использованием%

Question

В webkit похоже, что он сильно отличается от ie / ff / opera.

Для копирования - возьмите изображение, которое, скажем, w: 200px h: 400px.

падение HTML , как это.

<div id="container">
    <img id="whattheeff" src="/image.jpg" height="200" width="200" alt="render bug" />
</div>

и добавьте css как

<style>
div#container{height:1000px;background:#fff;border:1px dashed #000;}
img#whattheeff{width:200px; height:100%;}
</style>

В результате большинство браузеров отображают изображение с исходной высотой 400 пикселей и веб-набор с изображением на высоте его родителя. 1000px.

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

Answer 1

Я решил эту проблему:

Я установил height:auto; вместо 100%.

Получается auto игнорирует объявление в теге изображения и смотрит на auto высоту изображения ... так же, как 100% в большинстве браузеров, за исключением webkit.

Извлеченные уроки. Спасибо Корку за #jquery на freenode.

Answer 2

На самом деле firefox / ie (8) и chrome (webkit) отображают изображение с ростом родителей.