css Object-fit：保护盖在Safari上无法正常工作

gab6jxml 于 2022-12-20 发布在其他

关注(0)|答案(4)|浏览(254)

现在浏览器支持有问题。
我让它在Firefox和Chrome上正常工作，但是在safari上我遇到了图像问题。目前，图像是使用“object-fit：cover”并在Chrome/Firefox上有预期效果。但对于safari来说，它似乎忽略了这一点，图像非常大。这里是一个截图。左边是预期的，右边是实际结果。x1c 0d1x
下面是我的代码的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;
    }
  }

css

来源：https://stackoverflow.com/questions/60192601/object-fit-cover-not-working-correctly-on-safari

4条答案

按热度按时间

v09wglhw1#

我也遇到过同样的问题。我发现在Safari中设置最小高度为%100%而不是高度为100%可以解决这个问题。我还没有测试过宽度，但它可能对你有用。

.object-fit-cover-photo {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

赞(0）回复(0）举报 2022-12-20

pu3pd22g2#

我也遇到过类似的问题，通过将width（或max-width）属性的百分比值替换为固定值（rem或px），我设法解决了这个问题。在我的例子中，当img元素的宽度为%或继承了auto值时，Safari无法正确计算对象适合度。

赞(0）回复(0）举报 2022-12-20

nszi6y053#

在我的例子中，<picture>标记中有一个<img>，safari无法计算对象适合属性。
所以正如arixtty提到的--用“initial”值替换宽度的百分比值（对于img）是有帮助的，或者你可以在你的情况下使用固定值

赞(0）回复(0）举报 2022-12-20

o75abkj44#

最简单的解决方法是简单地删除对象拟合：覆盖并添加它使用规模。它已经过测试，它的工作很好

.object-fit-cover-photo {
    width: 100%;
    min-height: 100%;
   /*object-fit: cover;*/
    scale : 1.2; // or whasoever fits best for the device 
}

还可以使用介质查询添加它，以确保将其添加到所有标准设备。
基本上可以修复这个bug。

赞(0）回复(0）举报 2022-12-20

我来回答

css Object-fit：保护盖在Safari上无法正常工作

4条答案

相关问题

热门标签

最新问答