CSS网格：使所有图像覆盖相同的高度

Question

我正在建立一个同时包含横向和纵向图像的画廊，但我无法使它们适合所有等高的图像网格（即，纵向图像的裁剪视图，因此它们不拉伸其行高，并严重拉伸同一行中的其他图像）。我当前的代码如下：

HTML：

<div class="grid-three">
 <a href="#img1"><img src="landscape1.jpg" class="thumbnail"></a>
 <a href="#img2"><img src="landscape2.jpg" class="thumbnail"></a>
 <a href="#img3"><img src="portrait.jpg" class="thumbnail"></a>
 <a href="#img4"><img src="landscape3.jpg" class="thumbnail"></a>
 ...
</div>

CSS：

.thumbnail {
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}
.grid-three {
  display: grid;
  grid-template-columns: repeat(3,33%);
  /*grid-auto-rows: min-content;*/
  grid-gap: 2px;
}

我如上所述，尝试了grid-auto-rows和grid-template-rows以及grid-template-columns中的不同逗号，但是似乎没有任何效果。我也尝试过在.thumbnails标签中使用不同的高度和宽度命令，但是同样没有运气。我有一种解决方法，可以为任何肖像图像裁剪“缩略图”预览风景图像，但这似乎效率不高（更不用说为页面加载添加更多文件了）。有没有办法我可以在CSS中解决此问题，而又不涉及为行设置像素高度（我希望它在不同的屏幕上调整大小）？

Answer 1

我查看了您的代码，我必须告诉您，宽度/高度（最大或最大）与图像容器无关（至少在这种情况下），而不取决于图像本身（因此，如果容器的宽度为300px，当前图像的宽度为900px，图像将显示为“剪切”）。

我的建议是为缩略图选择固定尺寸，或尝试查看position：relative是否有所更改。您可以通过将设备的内部宽度（例如，普通笔记本电脑上的1536像素）减去4（2 *间距），然后将结果除以3，来进行微积分。]

同样，这可以通过一些与位置相关的小CSS代码来实现。

希望它有所帮助！

快乐编码:)

Answer 2

grid-template-columns具有auto-fit属性；也许您可以使用它？