我有一个徽标，我想使用媒体查询将其调整为全宽和相对高度，这在（几乎）除 Safari 之外的所有浏览器中都可以正常工作。
Safari 在整个屏幕上呈现图像，而不是保持纵横比。
我的 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>
我的 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%;}
}
这是一个小提琴。
任何帮助表示赞赏。
更新：
它现在可以在 Safari 上运行，但不能在我的 iPhone 3G 上的 Safari 上运行。有任何想法吗？