更改尺寸后如何使图像宽度变宽？

问题描述

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

第二组图像被裁剪到一定尺寸（从图像的顶部和底部去除等量并保留中间部分）。不幸的是，这不是流体布局。它卡在硬编码的 200 像素数量上。第一行可以有 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>

解决方法

在第二种情况下使用 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>