Html 控制CSS网格中的响应网格区域高度

我正在尝试使用CSS网格制作响应性强的图像库，但是我在调整大小方面遇到了问题

我希望较大的图像是行的最大高度，但在调整窗口大小时，较小的图像会像在图像上看到的那样扩展网格

我怎样才能做到这一点

.container{
保证金：0自动；
}
.画廊区{
显示：网格；
栅极间隙：30px；
网格模板区域：“big-image-1 big-image-2 small-image-1 small-image-2”“big-image-1 big-image-2 small-image-3 small-image-4”
}
.图-1{
网格区域：大图-1；
}
.图-2{
网格区域：大图-2；
}
.图-3{
网格区域：小图像-1；
}
.image-4{
网格区域：小图像-2；
}
.图-5{
网格区域：小图-3；
}
.图-6{
网格区域：小图像-4；
}
img{
宽度：100%；
}

---

我理解您的问题的方式是，当屏幕变小时，您希望使较大的图像与较小的图像对齐

问题是，您的图像宽度为100%，因此当屏幕较小时，高度（自动）较短，因为您的图像已达到100%标记

我将图像1和2的高度更新为100%，并将

img的
max width
设置为100%，而不是使用width 100%。这样，较大的图像可以具有100%的高度，并且仍然具有适当的比率，因为宽度默认为自动


.container{
保证金：0自动；
}
.画廊区{
显示：网格；
栅极间隙：30px；
网格模板区域：“big-image-1 big-image-2 small-image-1 small-image-2”“big-image-1 big-image-2 small-image-3 small-image-4”
}
.图-1{
网格区域：大图-1；
}
.图-2{
网格区域：大图-2；
}
.图-3{
网格区域：小图像-1；
}
.image-4{
网格区域：小图像-2；
}
.图-5{
网格区域：小图-3；
}
.图-6{
网格区域：小图像-4；
}
img{
最大宽度：100%；
}
.image-1、.image-2{
身高：100%；
}
我不知道是谁投票结束了这个问题，因为它主要是基于意见的，但它根本不是一个基于意见的问题。