Object-fit：封面在 Safari 上无法正常工作

Question

现在浏览器支持有问题。

我让它在 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;
    }
  }

Answer 1

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

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

Answer 2

我有一个类似的问题，并设法通过将宽度（或最大宽度）属性的百分比值替换为固定（rem 或 px）值来解决它。就我而言，当 img 元素的宽度为 % 或继承的自动值时，Safari 无法正确计算对象适合度。

Answer 3

就我而言，

<img>

标签内有一个

<picture>

。 safari 无法计算对象适合属性。

正如 arixtty 提到的那样 - 用“

initial

”值替换宽度的百分比值（对于img）有帮助。或者您可以在您的案例中使用固定值

Answer 4

最简单的解决方法是简单地删除 object-fit: cover 并使用 scale 添加它。它已经过测试，效果很好

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

还使用媒体查询添加它以确保它添加到所有标准设备。

这基本上可以修复这个错误。

Answer 5

这适用于我在 Iphone 上的案例，我需要任意图像来填充圆圈。

.parent {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        width: 80%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 8px solid var(--col-base-orange);
    }

    .parent img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
        flex: 1;
    }

<div class="parent">
 <img src="https://i.imgur.com/j1sDrGv.jpeg" />
</div>