Safari 100％高度和宽度例外 [英] Safari 100% height and width exception

问题描述

我有一个徽标，我想使用媒体查询将其调整为全宽和相对高度，该徽标在Safari以外的几乎所有浏览器中都能正常工作.

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会在整个屏幕上渲染图像，而不是保持宽高比.

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

我的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中使用.有什么想法吗?

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

推荐答案

使用height:auto;代替，我发现它同样适用，并且不会在Safari中引起此问题.

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

这篇关于Safari 100％高度和宽度例外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！