CSS + <img> webkit's implementation with using %

Question

Seems to be quite different in webkit compared to ie/ff/opera.

To replicate - take an image that is like say, w: 200px h: 400px.

drop in html like this.

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

and add css like

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

The result is most browsers displaying the image at it's original height 400px and webkit showing the image at the height of its parent. 1000px.

Anyone seen this before? anyone have a suggestion for getting webkit to play the same.

Answer 1

Although it is strange -

it is easily solved with height:auto; instead of 100%.

turns out auto ignore the declaration in the image tag and looks at the 'auto' height of the image...the same as 100% does in most browsers except webkit.

lessoned learned. thx to Cork on #jquery on freenode.

Answer 2

Actually firefox/ie(8) and chrome(webkit) renders image with parents height.