Question

我有一个徽标，我希望使用媒体查询调整大小和相对高度，这些浏览器几乎可以在除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%;}
}

这是fiddle。

任何帮助表示感谢。

更新

它现在适用于Safari，但不适用于iPhone 3G上的Safari。有什么想法吗？

Answer 1

使用height:auto;代替我发现的效果，并且不会在Safari中导致此问题。

Safari 100％高度和宽度异常

1 个答案: