0

绝对的CSS新手在这里。我在过去三天中找到的所有教程和示例都完美地解释了如何使用具有相似大小图像的网格设置图像库，但我不知道如何使用可变大小的图像进行设置在较小的图像下方没有可怕的间隙，例如这里： 可怕的间隙

我已经尝试使用对象拟合下的所有内容，但没有任何效果。我知道它是因为我严重误解了一些东西。我希望我的图片库看起来像：这个马赛克图片库并了解如何实现这一点。当它只是一堆空盒子时，我可以轻松地做类似的事情，但由于某种原因，当图像被混入其中时，我不理解它。

这是我的html：

<div class="gallery">
            <img src="images/img-1.jpg" alt="nature">
            <img src="images/img-2.jpg" alt="nature">
            <img src="images/img-3.jpg" alt="nature">
            <img src="images/img-4.jpg" alt="nature">
            <img src="images/img-5.jpg" alt="nature">
        </div>

和CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.gallery{
    display: grid;
    grid-template-areas:
    'img-1 img-2 img-3'
    'img-4 img-5 .';
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1rem;
}

img{
    display: block;
    overflow: hidden;
    width: 100%;
}

img-1{
    grid-area: img-1;
}

img-2{
    grid-area: img-2;
}

img-3{
    grid-area: img-3;
}

img-4{
    grid-area: img-4;
}

img-5{
    grid-area: img-5;
}

我试过查看类似的答案，希望我设置我的 img{ width: auto; height: 100%}，当我这样做的时候，一切都从屏幕上消失了，给了我一个空白页。

非常感谢任何和所有帮助！

4

0 回答 0