如何使 div 类图像响应？ [已关闭]

Question

我正在尝试制作 5 个图像并排等距的水平布局，并且能够随着浏览器大小的变化而换行到下一行。我想使用 Flexbox/我希望它具有响应能力，但我无法弄清楚。

我尝试在 CSS 中使用以下属性，但当我希望图像并排等距时，它只是将图像放在单独的行上。 （每个图像都与网站页面的链接相关联）

.image-row {
  display: flex;
  flex-wrap: wrap;
}

<div class="image-row">
   <!-- Image 1 -->
  <a href="salan.html">
    <img src="images/curryBlue.png" alt="curry" style="max-width:30%;height:auto">
  </a>
  <!-- Image 2 -->
  <a href="apps.html">
    <img src="images/appBlue.png" alt="app" style="max-width:30%;height:auto">
  </a>
  <!-- Image 3 -->
  <a href="meetha.html">
    <img src="images/gulabj.png" alt="meetha" style="max-width:30%;height:auto;">
  </a>
  <!-- Image 4 -->
  <a href="drinks.html">
    <img src="images/lassi.png" alt="drinks" style="max-width:30%;height:auto;">
  </a>
  <!-- Image 5 -->
  <a href="chawal.html">
    <img src="images/mattar.png" alt="chawal" style="max-width:30%;height:auto">
  </a>

</div>

Answer 1

由于您的代码片段引用了本地图像，因此我们无法准确看到您所看到的内容。如果我下面的代码片段不能回答您的问题，请更新您的代码片段以使用可在网络上访问的图像。前往picsum.photos了解详情。

body {
  margin: 1em;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: 1em;
}

.ir1 img {
  max-height: 150px;  
}

.ir2 img {
  max-width: 250px;  
}

hr {
  margin: 3em 1em;
}

<div class="image-row ir1">
  <a href=""><img src="https://picsum.photos/50/50"></a>
  <a href=""><img src="https://picsum.photos/300/200"></a>
  <a href=""><img src="https://picsum.photos/350/200"></a>
  <a href=""><img src="https://picsum.photos/400/200"></a>
  <a href=""><img src="https://picsum.photos/450/200"></a>
  <a href=""><img src="https://picsum.photos/500/200"></a>
</div>

<hr>

<div class="image-row ir2">
  <a href=""><img src="https://picsum.photos/50/50"></a>
  <a href=""><img src="https://picsum.photos/300/200"></a>
  <a href=""><img src="https://picsum.photos/350/200"></a>
  <a href=""><img src="https://picsum.photos/400/200"></a>
  <a href=""><img src="https://picsum.photos/450/200"></a>
  <a href=""><img src="https://picsum.photos/500/200"></a>
</div>