Safari 100% 高度和宽度异常

Posted 2023-03-06

【中文标题】Safari 100% 高度和宽度异常

【英文标题】：Safari 100% height and width exception

【发布时间】：2013-07-14 13:14:48

【问题描述】：

我有一个徽标，我想使用媒体查询将其调整为全宽和相对高度，这在（几乎）除 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"  ></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 上运行。有什么想法吗？

【参考方案1】：

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

【讨论】：

好吧，现在我觉得有点愚蠢。我什至没有尝试过，因为在开发人员工具中它被抚平了，好像它被 img 高度和宽度 html 属性覆盖了。

别觉得自己傻！我过去在 ios 设备上遇到过这个问题，发现这完美地解决了它。