javascript - 如何动态调整图像大小以适应 div？

Question

我有一个包含查询搜索结果的 div。我希望作为查询结果的所有图像都适合 div 而无需任何滚动(也就是我希望图像尽可能缩小，以便它们都适合内部)

这是一个屏幕截图，您可以得到一个更好的主意。

然后当我有 25 个结果时:

同样，我不在乎图像变得多小，我只希望它们全部缩小，以便它们适合结果容器。

Answer 1

这是您要找的吗？您可以使用 flexbox 来实现这一点。如果您只想将一定数量的图像包装在一行中，比如每行 10 张图像。然后您可以使用应用于这两个标签的这些附加样式:

#container {
flex-flow:row wrap;
}
#container > img{
width:10%; //100% / 10% = 10 images per row if the images are of same dimensions
}

#container {
  background: gray;
  width: 100%;
  max-height: 100%;
  display: flex;
}

#container>img {
  background: red;
  flex-shrink: 1;
  flex-basis: auto;
  height: auto;
}

<div id="container">

  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg" />
</div>