10

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

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

4

4 回答 4

2

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

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

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

响应式图像

于 2019-11-22T15:32:00.503 回答
1

宽度 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;
}
于 2013-12-16T11:02:24.937 回答
1

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

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

也可以看看：

于 2020-07-11T07:33:23.117 回答
0

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

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

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

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

于 2012-07-02T08:11:08.650 回答