css - 对象适合 : cover not working correctly on 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

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