Object-fit:覆盖Safari上不能正常工作的问题
Object-fit:覆盖Safari上不能正常工作的问题
提问于 2020-02-13 00:11:14
现在有一个浏览器支持的问题。
我让它在Firefox和Chrome上正常工作，但是在safari上我遇到了图像问题。目前图片是使用object-fit:cover设置的，在Chrome/firefox上达到了预期的效果。但对于safari，它似乎忽略了它，图像非常大。这是一个截图。左边是预期的，右边是实际的结果。
下面是影响此行/列的代码的html和css片段。
<div class="feature-image">
<img class="img-1" src="@/assets/preview-images/feature 1.png" alt="">
</div>
.feature-image {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.img-2 {
max-width: 320px;
}
}回答 2
Stack Overflow用户
发布于 2021-06-08 00:51:29
我也有同样的问题。我发现在Safari中，将最小高度设置为% 100%而不是高度100%就解决了这个问题。我还没有测试它的宽度，但它可能会为您工作。
.object-fit-cover-photo {
width: 100%;
min-height: 100%;
object-fit: cover;
}Stack Overflow用户
发布于 2021-03-31 18:32:15
我有一个类似的问题，并设法通过将width (或max-width)属性的百分比值替换为固定的(rem或px)值来修复它。在我的例子中，当img元素的宽度为%或继承的auto值时，Safari无法正确计算对象大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60192601
复制相关文章
相似问题
腾讯云开发者
