Почему в flexbox не работает объект?

У меня есть несколько столбцов, которые я даю равную ширину, используя flex. Каждый из них содержит теги img, и я хотел бы, чтобы эти изображения отображали размер object-fit: cover.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Ответы

Ответ 1

Из спецификация:

Свойство object-fit указывает, как содержимое замененного элемент должен быть установлен на коробке, установленной ее используемой высотой и ширина.

Ключевой термин: устанавливается в поле, установленном его используемой высотой и шириной

Изображение заменяется, а не его контейнер. И поле, установленное его используемой высотой и шириной, относится к самому изображению, а не к его контейнеру.

Итак, отбросьте контейнер и сделайте сами изображения элементами гибкости.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Ответ 2

Проблема заключается в том, что object-fit указывает, как изображение окрашивается внутри img, но вы не указали размеры этих элементов, а только размеры их родителей .test.

Итак, альтернатива Michael_B answer делает изображения того же размера, что и элементы flex:

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

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Ответ 3

Для тех, кто не может просто "очистить контейнер и сделать сами изображения гибкими элементами", просто добавьте уровни контейнера:

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">