使用％的CSS + <img/> webkit的实现

Question

与ie / ff / opera相比， webkit 似乎有很大的不同。

要复制 - 拍摄一张像这样的图像，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>

结果是大多数浏览器以原始高度400px显示图像，webkit在其父级高度显示图像。 1000像素。

之前有人见过吗？任何人都有建议让webkit发挥同样的作用。

Answer 1

我解决了这个问题：

我设置了height:auto;而不是100%。

结果auto忽略图片代码中的声明并查看图片的auto高度...与大多数浏览器中的100％相同，除了webkit。

Lessoned学到了。感谢Cork在freenode上的#jquery。

Answer 2

实际上，firefox / ie（8）和chrome（webkit）呈现父母身高的图像。