自动调整CSS网格图像的大小？

问题描述

我想尝试以一定的屏幕宽度使视口按比例缩小到网格图像，但不确定如何操作并设法保持实际网格布局的完整性。我目前有一个网格，其中包含许多不同大小的图像和行，并且希望在所有设备（台式机，平板电脑，移动设备等）上保持相同的布局/网格结构。

是否有一种方法可以使整个网格及其所有图像在视口中收缩，就像该链接一样？ Responsive Image

我知道这通常是将宽度设置为100％，将高度设置为自动的，但是当我将其应用于网格的标签时，图像上的高度会丢失。很感谢任何形式的帮助。谢谢！

以下是我正在使用的一些代码的示例：

.image-gallery {
width: 100%;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap: .5rem;
grid-template-areas: 
'img-16 img-17 img-27'
'img-16 img-18 img-27'
'img-16 img-19 img-27'
}
// Styling applied to these template-areas are only background images

要使图像达到所需的尺寸，我必须设置一个高度，这是我想知道如何与图像进行这种类型的交互以及自动调整高度的地方。

.image-gallery a {
 width: 100%;
 min-height: 16rem;
 }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）