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

【问题标题】：Object-fit: cover not working correctly on SafariObject-fit：封面在 Safari 上无法正常工作
【发布时间】：2021-06-08 00:51:29
【问题描述】：

目前存在浏览器支持问题。

我希望它在 Firefox 和 Chrome 上正常工作，但是在 safari 上我遇到了图像问题。目前，图像是使用“object-fit:cover”设置的，并且在 Chrome/firefox 上具有预期的效果。但对于 safari 来说，似乎忽略了它，而且图像非常大。这是一个屏幕截图。左边是预期的，右边是实际的结果。

这是影响此行/列的代码的 html 和 css sn-p。

  <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 safari cross-browser

【解决方案1】：

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

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

【讨论】：

我在 Safari 中遇到了同样的问题。我发现设置min-height: 100vh 有效，而min-height: 100% 没有。但这可能只是我的用例。

【解决方案2】：

我遇到了类似的问题，并设法通过将宽度（或最大宽度）属性的百分比值替换为固定（rem 或 px）值来解决它。就我而言，当 img 元素的宽度为 % 或继承的 auto 值时，Safari 无法正确计算 object-fit。

【讨论】：