Why is the grid-column size larger than the image itself? How can I make it so that the column takes only the size required to fit the image? Thank you!!

Image below⬇

Here's the code. //Html

<section >
    <img  src="/source/images/img2.jpg" alt="food-1">
    <img  src="source/images/img1.jpg" alt="food-2">
    <img  src="source/images/img3.jpg" alt="food-3">
    <img  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%);
}

CodePudding user response：

maybe because your height is at 80% and you need to put it on auto and put object-fit cover to balance your photo. Let me know

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

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

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

CodePudding user response：

If I understood correctly, your height is not 100%. If you fit the image you can add object-fit: cover or object-fit: contain

Like this

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