html - 带有 CSS Grid 的马赛克照片库 - 照片被裁剪了？

Question

我正在尝试仅使用 CSS Grid（没有插件或 Javascript）来构建这个马赛克照片库。在所有的 CSS 代码之后，结果看起来像这支笔https://codepen.io/Cilvako/pen/YzKLLZw

问题在于，由于照片尺寸不同，其中一些被裁剪得很糟糕。有没有解决方案，或者我应该简单地尝试构建我的网格更接近照片尺寸，这样它们就不会被裁剪？（我知道所有的裁剪都来自设置我的列和行）。

我尝试使用其他值更改 object-fit:，但结果更奇怪。

   .gallery__img {
       width: 100%;
       height: 100%;
       object-fit: cover;
}

有没有办法拥有一个马赛克画廊，里面有不同尺寸的照片，无论你如何构建网格元素，它们都不会被裁剪？谢谢！

标签： htmlcsscss-gridphoto-gallery