Google Chrome版本72.0.3626.109中的图片样式“object-fit：contain”已中断

Question

我最近在我的mac中更新了Google Chrome Version 72.0.3626.109 (Official Build) (64-bit)，现在情况正在破裂。

有点复杂的嵌套标记背后的原因是因为我需要显示放置在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>

Answer 2

.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>