如何让flexbox中的<img>实现与background-image一致的对齐效果？

在flexbox布局中，右上角用background-image实现的两个瓶子已达到预期效果：填满高度、裁剪适配宽度且无溢出。但右下角用<img>元素的瓶子无法实现相同效果，由于图片大小或数量可能变化，不想显式设置宽度，请问该如何解决？

布局效果说明：左上角为单个大图片，右上角两个以背景图实现的小图片完全填满容器；右下角两个<img>元素的图片高度不足，未填满所在容器区域。

CSS #

.app {
  padding: 5%;
}
.app > * {
  max-width: 900px;
  margin: 0px auto;
}
.box {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 18px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.box.column {
  flex-direction: column;
}
.box.hasBackground {
  padding: 5%;
}
.box img {
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
}

HTML #

<div class="app">
  <div class="box row hasBackground" style="background-image: linear-gradient(to top, rgb(250, 208, 196) 0%, rgb(255, 209, 255) 100%);">
    <div class="box row ">
      <img src="https://velgnorsk.no/wp-content/uploads/2020/01/Ocean-bottle_VN_marinebla%CC%8A.jpg">
    </div>
    <div class="box column ">
      <div class="box row ">
        <div class="box row hasBackground" style="background-image: url(&quot;https://velgnorsk.no/wp-content/uploads/2020/01/Ocean-bottle_VN_marinebla%CC%8A.jpg&quot;);"></div>
        <div class="box row hasBackground" style="background-image: url(&quot;https://velgnorsk.no/wp-content/uploads/2020/01/Ocean-bottle_VN_marinebla%CC%8A.jpg&quot;);"></div>
      </div>
      <div class="box row ">
        <img src="https://velgnorsk.no/wp-content/uploads/2020/01/Ocean-bottle_VN_marinebla%CC%8A.jpg">
        <img src="https://velgnorsk.no/wp-content/uploads/2020/01/Ocean-bottle_VN_marinebla%CC%8A.jpg">
      </div>
    </div>
  </div>
</div>

问题核心是<img>元素默认保留自身宽高比，且flex容器未强制传递高度约束，导致图片无法自动填满容器。可通过以下两步调整：

• 给flex容器添加强制高度约束
  给所有.box容器新增height: 100%，确保容器能继承上级的高度限制，为图片提供明确的高度参考：

  .box {
    /* 原有属性保留，新增 */
    height: 100%;
  }
  

• 修改图片的尺寸规则
  将图片的max-height/max-width改为height: 100%和width: 100%，配合object-fit: cover实现填满容器且裁剪适配，同时可选添加display: block消除图片默认的行内间距：

  .box img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: block;
  }
  

调整后，flex布局会自动均分动态数量图片的宽度，每张图片都会填满所在flex项的高度，通过object-fit: cover裁剪适配宽度，无需设置固定数值。

内容的提问来源于stack exchange，提问作者Marius Brataas