使用 CSS 强制纵横比在 Safari 上不起作用

Question

以下代码在 Firefox 和 Chrome 中运行良好，但不适用于Safari（在 Mac 和 iPad 上测试）：http : //jsfiddle.net/eFd87/。

<div id="wrapper">
    <div id="content">
        <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">        
    </div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;
    text-align: center;
}
#content img {
    max-height: 100%;
}?

目标是让包装 div 保持固定的纵横比（在我的 Web 应用程序中它是一个轮播），并且其中的图像调整大小以适应 div（和中心）。

在 Safari 上，图像不显示，因为height: 0（这将使 img 的高度为 0）。带有height: 100%图像显示但不适合 div（溢出）。

你看到这个问题的任何解决方案吗？我已经做了几个小时了...

Answer 1

正如在 WWDC20 Web 开发人员的新功能中宣布的那样，从 Safari 13.1 开始，WebKit 现在根据图像元素的宽度和高度值计算图像长宽比。这意味着您遇到的问题已在最新版本的浏览器上得到修复。

在下一个视频中，您可以看到在我的机器上运行的测试，其中 Chrome 和 Safari 的行为相同： https: //recordit.co/GULXcMpfPW

也可以看看：

• WebKit 变更日志，包括修复
• 实施修复的WebKit 变更集