更改尺寸后如何使图像具有流动宽度？

Question

sn-p 在 flexbox 中显示两组图像。第一个是具有流畅布局的原始分辨率的图像。它们各占屏幕宽度的 1/3，并在您更改屏幕宽度时适当调整大小，以便在任何时候第一行都恰好有 3 张图像。

第二组图像被裁剪到一定尺寸（从图像的顶部和底部移除相等的数量，并留下中间部分）。不幸的是，这不是一个流畅的布局。它停留在硬编码的 200px 数量上。第一行可以有 1、2 或 3 张图像，具体取决于屏幕的宽度。

如何将两者结合起来？所以图像像第二组图像一样被裁剪，但布局像第一组图像一样流畅，每行正好有 3 张图像缩放到正确的大小？

.container1 {
  width: 33.33%;
  overflow: hidden;
}

.container1 img {
  max-width: 100%;
}

.container2 {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.container2 img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<h1>original img</h1>
<div>
  <img src="https://picsum.photos/200/300" />
</div>
<h1>fluid layout</h1>
<div style="display:flex;flex-wrap:wrap">
  <div class="container1">
    <img src="https://picsum.photos/200/300" />
    img 1
  </div>
  <div class="container1">
    <img src="https://picsum.photos/200/300" />
    img 2
  </div>
  <div class="container1">
    <img src="https://picsum.photos/200/300" />
    img 3
  </div>
  <div class="container1">
    <img src="https://picsum.photos/200/300" />
    img 4
  </div>
</div>
<h1>resized images</h1>
<div style="display:flex;flex-wrap:wrap">
  <div class="container2">
    <img src="https://picsum.photos/200/300" />
    img 1
  </div>
  <div class="container2">
    <img src="https://picsum.photos/200/300" />
    img 2
  </div>
  <div class="container2">
    <img src="https://picsum.photos/200/300" />
    img 3
  </div>
  <div class="container2">
    <img src="https://picsum.photos/200/300" />
    img 4
  </div>
</div>

Answer 1

在第二种情况下使用 CSS Grid，这允许您明确提及每行需要多少列：

.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.flex-parent {
  display: flex;
  flex-wrap: wrap
}

.flex-item {
  width: 33.33%;
  overflow: hidden;
}

.flex-item img {
  max-width: 100%;
}

.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  overflow: hidden;
}

.grid-item img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<h1>original img</h1>
<div>
  <img src="https://picsum.photos/200/300" />
</div>
<h1>fluid layout</h1>
<div class="flex-parent">
  <div class="flex-item">
    <img src="https://picsum.photos/200/300" /> img 1
  </div>
  <div class="flex-item">
    <img src="https://picsum.photos/200/300" /> img 2
  </div>
  <div class="flex-item">
    <img src="https://picsum.photos/200/300" /> img 3
  </div>
  <div class="flex-item">
    <img src="https://picsum.photos/200/300" /> img 4
  </div>
</div>
<h1>resized images</h1>
<div class="grid-parent">
  <div class="grid-item">
    <img src="https://picsum.photos/200/300" /> img 1
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/200/300" /> img 2
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/200/300" /> img 3
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/200/300" /> img 4
  </div>
</div>