Safari 100% height and width exception

问题

I've got a logo that I want to resize to full width and relative height using media queries which works fine in (almost) every browser except Safari.

Safari renders the image over the whole screen instead of keeping the aspect ratio.

My HTML

<div id="logo"><a href="http://www.stilundso.de/"><img src="http://lorempixel.com/output/technics-h-c-200-206-2.jpg" width="200" height="206"></a></div>

My CSS

div#logo {background:#fff; width:200px; border-right:1px solid #FFF; height:206px; position:absolute; top:0; left:0; padding-top:41px;}

@media only screen and (max-width:206px) {
    div#logo {display:block; position:static; padding:0; border-right:none; width:auto; height:auto;}
    div#logo img {height:100%; width:100%;}
}

Here's a fiddle.

Any help appreciated.

UPDATE:

It works on Safari now but not in Safari on my iPhone 3G. Any ideas?

回答1:

Use height:auto; instead which I find works just as well and doesn't cause this issue in Safari.

来源：https://stackoverflow.com/questions/17675153/safari-100-height-and-width-exception