為什么網格列的大小比影像本身大？我怎樣才能使該列僅采用適合影像所需的大小？謝謝！！
下圖?
這是代碼。// 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%);
}
uj5u.com熱心網友回復：
可能是因為您的身高為 80%，您需要將其設定為自動并放置適合物件的封面以平衡您的照片。讓我知道
.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,c_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,c_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,c_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,c_limit/health-fitness-blogs-vitamin-g-1108-food-samples-germs_vg.jpg" alt="food-4">
</section>uj5u.com熱心網友回復：
如果我理解正確，你的身高不是 100%。如果您適合影像，您可以添加object-fit: cover或object-fit: contain
像這樣
.gallery-img{
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(75%);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481801.html
上一篇：導航欄中的下拉選單卡住
下一篇：如何在html中并排顯示影像