Почему object-fit работает только если картинка обёрнута в flex?

Question

[Сергей Константинов]

Почему object-fit: cover; работает только если картинка обёрнута в тег с свойством display:flex, а если displayblock то не работает.

Comments

[Вадим]

чтобы работало это свойство, нужно чтобы у блока были заданы размеры.

[Вадим]

Сергей Константинов, это конечно интересно, но флекс и на всю строку не растягивается, как block, верно?

Answer 1

[HamSter]

Все работает

html:

<div>
  <img src="https://images.unsplash.com/photo-1610405317849-43e74311fcac?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>

css:

div {
  display: block;
  width: 200px;
  height: 200px;
}

div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}