css 调整一组IMG的大小以适合容器DIV

b1zrtrql 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(116)

我有一组N个图像（正方形，但希望这并不重要），我想把它们放在容器div中，我想调整图像元素的大小，以便它们在div中占用最大的空间。
我已经找到了很多单个图像的例子，甚至是一行图像，但没有二维网格的例子。
我目前的方法是在JS中自己计算图像大小，然后直接使用它，但考虑到所有的边距，填充等被证明是困难的。
我应该使用什么CSS功能？
示例代码（带有硬编码的IMG宽度/高度）-这里看起来最适合的是4x 2，但每个IMG需要更大，以便利用完整的宽度/高度：

img {
  border: 1px orange dotted;
  width: 128px;
  height: 128px;
  padding: 0;
  margin: 0;
}

#container {
  position: absolute;
  left: 64px;
  top: 32px;
  width: 600px;
  height: 400px;
  background-color: #99f;
  overflow: hidden;
  font-size: 0;
}

个字符

css

来源：https://stackoverflow.com/questions/77783136/resize-a-set-of-imgs-to-fit-a-container-div

1条答案

按热度按时间

ifsvaxew1#

您可以使用网格并利用auto-fill属性和auto-fill来自动计算图像的宽度。这里是这个概念的reference。

main {
  padding: 1rem;
}

img {
  border: 1px orange dotted;
  width: 100%;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 100%;
  background-color: #99f;
  overflow: hidden;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 调整一组IMG的大小以适合容器DIV

1条答案

相关问题

热门标签

最新问答