有没有办法在事先不知道图像大小的情况下拥有 CSS Grid 样式布局？

Question

基本上，我从 Reddit 检索图像，并希望将它们整齐地显示在画廊风格的网格中。我可以使用柔性显示器并调整图像的大小以具有相同的尺寸，但当然它们的尺寸并不相同，而且看起来不太好。 CSS Grid 能做到这一点吗？我一直无法找到有关此的任何信息。如果有帮助，我将 React JS 与 Sass 一起使用。非常感谢任何帮助。

Answer 1

我从来没有真正尝试过这个，但我能想到两件事：

1. 使用 Javascript 检索图像的尺寸并使用它动态构造 grid-template-areas 属性。您可以将网格划分为假想的行和列，并设置一些基值来四舍五入图像将占用的行数和列数。

2. 使用 css 属性 object-fit: cover。它并不完美，但它不会拉伸图像。有了这个，您还可以根据图像的尺寸和方向为图像分配类并获得近似值。更简单。