“適合對象：掩蓋”無效

Question

我使用CSS Grid Layout 。 為什么不object-fit ？

Codepen

 .slider__card__small_images { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0 10px; padding: 20px 0; } .small_image__link { display: flex; justify-content: center; align-items: center; text-decoration: none; background-color: #f2f4f5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; position: relative; } .small_image__link::before { content: ""; padding-bottom: 100%; display: inline-block; vertical-align: top; } .small_image__img { width: 100%; height: 100%; object-fit: cover; } 

 <div class="slider__card__small_images"> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/250" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/100" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/200" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/150" alt="" > </a> </div> 

Answer 1

您需要將height:100%賦予.small_image__link 。

 .slider__card__small_images { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0 10px; padding: 20px 0; } .small_image__link { display: flex; justify-content: center; align-items: center; text-decoration: none; background-color: #f2f4f5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; position: relative; height: 100%; } .small_image__link::before { content: ""; padding-bottom: 100%; display: inline-block; vertical-align: top; } .small_image__img { width: 100%; height: 100%; object-fit: cover; } 

 <div class="slider__card__small_images"> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/250" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/100" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/200" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/150" alt="" > </a> </div> 

或者，您也可以在父grid-template-rows: 150px;

 .slider__card__small_images { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0 10px; padding: 20px 0; grid-template-rows: 150px; } .small_image__link { display: flex; justify-content: center; align-items: center; text-decoration: none; background-color: #f2f4f5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; position: relative; } .small_image__link::before { content: ""; padding-bottom: 100%; display: inline-block; vertical-align: top; } .small_image__img { width: 100%; height: 100%; object-fit: cover; } 

 <div class="slider__card__small_images"> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/250" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/100" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/200" alt="" > </a> <a href="#" class="small_image__link"> <img class="small_image__img" src="https://picsum.photos/400/150" alt="" > </a> </div>