В Google Chrome версии 72.0.3626.109 не работает стиль изображения «Подгонка объекта: содержит»

Question

Я недавно обновился до Google Chrome Version 72.0.3626.109 (Official Build) (64-bit) на моем Mac, и сейчас все ломается.

Причина, по которой стоит немного сложная вложенная разметка, заключается в том, что мне нужно показать изображение, расположенное в центре divсоответствующие изображения имеют другой размер, но пропорционально измененный размер внутри квадратного дел.Итак, все это работало нормально до обновления на новый Google Chrome.

.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

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

Не совсем уверен, почему это сработало, так как height:100% в этом случае завершится ошибкой , поскольку в родительском контейнере не задана высота.Таким образом, реальное поведение кажется правильным.

Вы можете сделать изображение равным 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>