html - 图片样式 "object-fit: contain"在 Google Chrome 版本 72.0.3626.109 中损坏

Question

我最近在我的 Mac 上更新到 Google Chrome 版本 72.0.3626.109(官方构建)(64 位)，现在出现问题。

嵌套标记有点复杂的原因是因为我需要显示放置在 div 中心的图像，图像大小不同但在正方形 div 内按比例调整大小。因此，在更新到新的谷歌浏览器之前，所有这些都运行良好。

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-color: gray;
}

.child {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding-bottom: 100%;
}

.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent">
    <div class="child">
      <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
    </div>
  </div>
</div>

Answer 1

不太确定为什么它会以 height:100% should fail 的形式工作在这种情况下，因为父容器中没有设置高度。所以实际行为似乎是正确的。

您可以将图像设为 position:absolute 以解决此问题:

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-color: gray;
}

.child {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding-bottom: 100%;
}
.child > img {
  position:absolute;
}
.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent">
    <div class="child">
      <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
    </div>
  </div>
</div>

您还可以使用一个 div 来简化它:

.g-parent {
  width: 150px;
}

.parent {
  position: relative;
  padding-bottom: 100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color: gray;
}

.my-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

<div>
  <img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>

<h4>Show above image inside below div</h4>

<div class="g-parent">
  <div class="parent" style="background-image:url(https://dummyimage.com/400x200/000/fff)">
  </div>
</div>