css-safari浏覽器100%適應高寬

safari浏覽器100%適應高寬

有一個logo，我設置用媒體查詢自動適應屏幕高寬。但是只有在safari浏覽器中會出問題。

safari會讓logo充滿整個屏幕，改變原來的長寬比。

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%;}
}

最佳回答：

使用height:auto; ,這樣在safari中不會出現問題。