如何使同一行中的所有图像根据父 div 缩放？答案

【问题标题】：How to make all images in the same row scale accordingly to parent div?如何使同一行中的所有图像根据父 div 缩放？
【发布时间】：2021-01-21 12:53:48
【问题描述】：

我正在尝试在每个 flex div 中添加多行，其中包含不同的图像计数。

无论父 div 的宽度是多少，图像都应该始终在同一行中。在这里，我设置了 max-width: 350px，图像应该相应地调整它们的宽度，以便它们适合（在它们的比例中）。如果有 5 张图片，则每张图片的宽度应为 20%。如果有 10 张图片，则每张图片的宽度应为 10%，依此类推。

我知道我可以在图像上设置宽度，但我想跳过每个 div 的手动工作，因为会有很多变化。

.flex {
  display: flex;
  max-width: 350px;
}

img {
  margin: 1px;
  flex: 1;
}

<div class="flex">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
</div>
<div class="flex">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
  <img src="https://via.placeholder.com/100">
</div>

【问题讨论】：

最小宽度：0 到图像

标签： html css

【解决方案1】：

您需要将图像放在 div 中，否则 flex 不会调整它们的大小

.flex {
  display: flex;
  width: 100%;
  max-width: 350px;
}

.img-holder {
  margin: 1px;
}

img {
  display: block;
  width: 100%;
}

<div class="flex">
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
</div>
<div class="flex">
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
  <div class="img-holder"><img src="https://via.placeholder.com/100"></div>
</div>

【讨论】：