Safari的100%的高度和宽度的异常(Safari 100% height and width

2019-10-18 09:34发布

我已经得到了我想要的大小调整为全宽度和相对高度使用媒体查询这(几乎)所有的,除了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在Safari浏览器在我的iPhone 3G。 有任何想法吗?

Answer 1:

使用height:auto; 反而我觉得这作品一样好,并在Safari不会导致此问题。



文章来源: Safari 100% height and width exception