如何在大小受限的容器中布局不同大小的图像？

Question

我有三个不同大小的图像，我想在一个具有最大宽度的响应式容器中并排布局。例如

Desired layout

图片的 HTML 如下：

<ul class="break-out ideation-sketches">
   <li><img src="images/work-blue-ideation1.jpg" alt="Ideation sketches"></li>
   <li><img src="images/work-blue-ideation2.jpg" alt="More ideation sketches"></li>
   <li><img src="images/work-blue-ideation3.jpg" alt="Yet more ideation sketches"></li>
</ul>

我尝试将 ul 设为 Flexbox 并使用 max-width 限制其大小，但图像会强制容器比页面宽。使用 display:grid 我能够限制容器的大小，但我无法让中心图像与两侧的第一个和最后一个图像的高度相匹配。

总结一下：

1. 添加大量不同尺寸和纵横比的图片
2. 让它们在容器中并排显示
3. 容器应缩小到浏览器的宽度，并且不能超出其最大宽度
4. 容器的高度事先是未知的 - 它会适应以适应图像
5. 图像应按比例调整大小，以便在保持纵横比的同时填满容器。
6. 每张图片都应与其同级图片具有相同的高度，并在必要时使用不同的宽度以保持其自己的纵横比。

Answer 1

我更接近使用以下内容尝试实现的目标。不过我希望有人可以提出更优雅的解决方案。

<style>
   .ideation-sketches {
   max-width: 700px;
   margin: 0 auto;
   }
   .outer {
   display: table;
   width: 100%;
   }
   .outer div {
   display: table-cell;
   }
   img {
   width: 100%;
   height: auto;
   }
</style>
<div class="break-out ideation-sketches">
   <div class="outer">
      <div><img src="images/work-blue-ideation1.jpg" alt="Ideation sketches"></div>
      <div><img src="images/work-blue-ideation2.jpg" alt="More ideation sketches"></div>
      <div><img src="images/work-blue-ideation3.jpg" alt="Yet more ideation sketches"></div>
   </div>
</div>

Answer 2

你可以像这样使用 flex：

.ideation-sketches {
  max-width: 700px;
  margin: 0 auto;
}

.outer {
  display: flex;
}

.outer div {
  text-align: center;
  padding: 0px;
}

.center img {
  width: 300px;
}

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

<div class="break-out ideation-sketches">
  <div class="outer">
    <!-- same size as third -->
    <div class="left"><img src="https://placekitten.com/200/300" alt="Ideation sketches"></div>
    <!-- different size -->
    <div class="center"><img src="https://placekitten.com/400/200" alt="More ideation sketches"></div>
    <div class="right"><img src="https://placekitten.com/440/300" alt="Yet more ideation sketches"></div>
  </div>
</div>