目前存在浏览器支持问题。
I have it working as hoped for Firefox and Chrome, however on safari I am having issues with images. Currently, the image is set using "object-fit: cover" and has the intended effect on Chrome/firefox. But for safari, it seems to ignore it and the image is very large.
Here is a screenshot. The left is the intended the right is the actual outcome.
这是影响该行/列的代码的 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;
}
}
我遇到过同样的问题。我发现设置最小高度 %
100% 而不是 100% 的高度在 Safari 中解决了这个问题。我还没有测试过它的宽度,但它可能适合你。
.object-fit-cover-photo {
width: 100%;
min-height: 100%;
object-fit: cover;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)