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在What's new for web developers上宣布的那样，从Safari 13.1开始，WebKit现在根据图像元素的宽度和高度值计算图像纵横比。这意味着您遇到的问题已在最新版本的浏览器中得到解决。

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

另请参阅：

WebKit changelog包括修复程序
WebKit changeset实施修补程序的地方

Answer 2

这对你的问题不是一个很好的答案，但它仍然是一个答案。

我非常怀疑使用仅CSS方法可以做到这一点，因为据我所知（我很高兴能够对此进行更正），没有办法根据另一个css属性执行计算。所以width: height * 1.3;例如是不可能的。你也不能使用％，因为这是父母的百分比，而不是自己的百分比。

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

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

Answer 3

宽度100％和高度自动为我在Safari上工作。最初，我使用100％的w和h，它在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;
}

Answer 4

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

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

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

Responsive Images

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

4 个答案: