Html 带有CSS网格的马赛克照片库-照片被裁剪？

我正试图建立这个马赛克照片库只使用CSS网格（没有插件或Javascript）。在所有的CSS代码之后，结果在这支笔中看起来是这样的

问题是，由于照片的尺寸不同，其中一些被裁剪得非常严重。有没有办法解决这个问题，或者我应该试着让我的网格更接近照片的尺寸，这样它们就不会被裁剪了？（我知道所有的裁剪都是通过设置我的列和行来实现的）

我尝试改变对象的适合度：使用其他值，但结果更奇怪

.gallery\uu img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

有没有办法让一个马赛克画廊里的不同尺寸的照片不会被裁剪，无论你如何构建网格元素？谢谢大家!

你可以选择在哪里裁剪，否则调整跨度更接近图像大小/方向谢谢，我认为越接近图像大小效果越好！