如何调整网格列？

Question

为什么网格列的尺寸比图像本身大？我怎样才能使该列仅采用适合图像所需的大小？谢谢！！

Image below⬇

这是代码。 //Html

<section class="section-gallery">
    <img class="gallery-img img-1" src="/source/images/img2.jpg" alt="food-1">
    <img class="gallery-img img-2" src="source/images/img1.jpg" alt="food-2">
    <img class="gallery-img img-3" src="source/images/img3.jpg" alt="food-3">
    <img class="gallery-img img-4" src="source/images/img1.jpg" alt="food-4">
</section>

//*Css*
.section-gallery{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;  
}

.gallery-img{
     width: 100%;
     height: 80%;
     filter: brightness(75%);
}

Answer 1

如果我没理解错的话，你的身高不是100%。如果你适合图像，你可以添加 object-fit: cover 或 object-fit: contain

像这样

.gallery-img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(75%);
}

Answer 2

可能是因为你的身高在80%，你需要把它放在auto上，然后放上object-fit封面来平衡你的照片。让我知道

.section-gallery{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;  
}

.gallery-img{
     width: 100%;
     height: auto;
     filter: brightness(75%);
     object-fit: cover;
}

<section class="section-gallery">
    <img class="gallery-img img-1" src="https://media.glamour.com/photos/56959a22d9dab9ff41b2e3e1/master/w_1600%2Cc_limit/health-fitness-blogs-vitamin-g-1108-food-samples-germs_vg.jpg" alt="food-1">
    <img class="gallery-img img-2" src="https://media.glamour.com/photos/56959a22d9dab9ff41b2e3e1/master/w_1600%2Cc_limit/health-fitness-blogs-vitamin-g-1108-food-samples-germs_vg.jpg" alt="food-2">
    <img class="gallery-img img-3" src="https://media.glamour.com/photos/56959a22d9dab9ff41b2e3e1/master/w_1600%2Cc_limit/health-fitness-blogs-vitamin-g-1108-food-samples-germs_vg.jpg" alt="food-3">
    <img class="gallery-img img-4" src="https://media.glamour.com/photos/56959a22d9dab9ff41b2e3e1/master/w_1600%2Cc_limit/health-fitness-blogs-vitamin-g-1108-food-samples-germs_vg.jpg" alt="food-4">
</section>

如何调整网格列？

How to adjust grid columns?

html

css