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

【问题标题】：Forcing aspect ratio with CSS doesn't work on Safari使用 CSS 强制纵横比在 Safari 上不起作用
【发布时间】：2012-07-01 20:18:00
【问题描述】：

以下代码在 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（它溢出）。

您是否看到任何解决此问题的方法？我已经做了好几个小时了……

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/1311068/…
Matthieu，您可能需要再次查看链接页面。我的回答提出了两种方法，其中一种是纯 CSS，两种都是无 javascript 的。
看，最好的办法是在 JS 上动态计算宽度/高度，因为让它在 Safari 上工作非常头疼，主要是当你因为导航栏而有动态高度时，等例如，对于 9/16（手机）的纵横比，请执行：height: window.innerHeight；宽度：${${window.innerHeight * 9 / 16}px}

标签： css image safari aspect-ratio

【解决方案1】：

如果您不担心旧浏览器，您可以使用 object-fit 属性

CSS object-fit 属性用于指定如何调整 <img> 或 <video> 的大小以适应其容器。

或者，如果您需要支持旧浏览器，这里讨论了一个巧妙的 Netflix 技巧：

Responsive Images

【讨论】：

【解决方案2】：

正如 WWDC20 期间 What's new for web developers 所宣布的那样，从 Safari 13.1 开始，WebKit 现在根据图像元素的宽度和高度值计算图像纵横比。这意味着您遇到的问题已在最新版本的浏览器上得到修复。

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

另见：

WebKit changelog 包括修复
WebKit changeset 修复的地方

【讨论】：

嗨，对于在 safari 中设置了纵横比且其高度不取决于其内容而是取决于纵横比的框（div 元素），是否有任何可用的修复程序？为 chrome 工作，但不在 safari 中工作

【解决方案3】：

宽度 100% 和高度自动在 Safari 上为我工作。最初，我对 w 和 h 都使用 100%，这在 FF 上运行良好，但在 Safari 上失败。

.stretch {
  width: 100%;
  height: auto;
}

HTML：

<div>
    <img src="images/someimg.jpg" class="stretch" alt="" />
</div>

哦，我使用了 Bootstrap，它将它添加到所有元素中。

*, *:before, *:after {
  -moz-box-sizing: border-box;
}

【讨论】：

【解决方案4】：

这对您的问题来说并不是一个很好的答案，但它仍然是一个答案。

我非常怀疑是否有可能使用仅使用 CSS 的方法来执行此操作，因为据我所知（我很高兴对此进行更正）没有办法基于另一个 CSS 属性执行计算。因此，例如 width: height * 1.3; 是不可能的。您也不能使用 %，因为这是父级的百分比，而不是自身的百分比。

您目前正在查看的涉及底部填充的方式也不会可靠地工作，它会在您的屏幕上工作，但是如果其他人的屏幕具有不同的纵横比，或者他们有很多工具栏来改变浏览器的纵横比窗口然后纵横比将是错误的。 % 是父级的，除非你能保证你不能真正使用的大小。

据我所知，您唯一的选择是 JavaScript。最明显的也是我的建议是 jQuery 或其他一些框架来计算和明确设置基于宽度的高度。不过不要忘记监听浏览器窗口的大小调整。

【讨论】：