从规范：
object-fit属性指定了被替换元素的内容应该如何适应由其使用的高度和宽度建立的框。
关键词是：* 根据使用的高度和宽度安装在箱子上 *
图像被替换，而不是它的容器。由其使用的高度和宽度建立的框与图像本身相关，而不是其容器。
因此，废弃容器并使图像本身成为Flex项。

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

Revised Codepen

其他详细信息

5.5.调整对象大小：object-fit属性

object-fit属性指定了被替换元素的内容应该如何适应由其使用的高度和宽度建立的框。

• 以下是其中三个值：*
  *cover

被替换的内容的大小被调整为在填充元素的整个内容框的同时保持其纵横比。

*contain

被替换内容的大小被调整为保持其纵横比，同时适合元素的内容框。

*fill

被替换的内容的大小被调整为填充元素的内容框。
使用cover，图像保留其纵横比并覆盖所有可用空间。使用此选项，图像的大部分可能会被裁剪到屏幕外。
使用contain时，纵横比也保持不变，但图像会缩放以适应盒子。这可能导致在左侧和/或右侧（纵向配合）或顶部和/或底部（横向配合）上的空白。object-position属性可用于在其框内移动图像。
使用fill时，放弃了纵横比，图像的大小适合盒子。

• 浏览器兼容性 *

在撰写本文时，Internet Explorer不支持object-fit。有关解决方法，请参见：

• Neat trick for CSS object-fit fallback on Edge (and other browsers)
• fitie - An object-fit polyfill for Internet Explorer
• object-fit-images - Adds support for object-fit on IE9, IE10, IE11, Edge and other old browsers
• Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.

问题是object-fit指定了如何在img中绘制图像，但您没有指定这些元素的大小，只指定了它们的父元素.test的大小。
因此，Michael_B's 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>

对于那些不能“废弃容器并使图像本身成为flex项”的人，只需添加容器级别：

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

为了在不兼容的浏览器中支持图像的object-fit功能，您可以使用background-image和background-size创建CSS类。为了正确计算占用的空间，您可以 Package 一个img元素并使其不可见。示例如下。

HTML

<div class="my-image">
    <img src="path/to/my/image"/>
</div>

CSS

.my-image {
    background-image: url('path/to/my/image');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.my-image > img {
    visibility: hidden;
}

使用Bootstrap 5，您可以通过这种设置来实现这一点;

<div class="d-flex align-items-center justify-content-center text-center position-relative overflow-hidden vh-100">

  <!-- Put a higher z-index on this one -->
  <div class="container-fluid container-lg py-5 py-lg-10">
    <h1>Your content</h1>
  </div>

  <div class="position-absolute top-0 end-0 bottom-0 start-0">
    <img src="https://placehold.co/600x400" alt="" class="d-none d-lg-block w-100 h-100">
  </div>

</div>

如果<img/>在IE11中被拉伸为100%，则在<img/>本身上添加flex-shrink: 0，如下所示：Flexbox on IE11: image stretched for no reason?