CSS中,我們可以使用object-fit
屬性來實現(xiàn)只顯示圖片的部分,這個屬性可以指定圖片在容器中的填充方式,其中有一個值叫做cover
,它可以讓圖片始終覆蓋整個容器,但是只顯示圖片的部分。
下面是一個示例代碼:
<div class="image-container"> <img src="image.jpg" alt="example"> </div>
.image-container { width: 200px; height: 200px; position: relative; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; }
在這個示例中,我們創(chuàng)建了一個名為image-container
的容器,并指定了它的寬度和高度,我們將圖片放入容器中,并指定圖片的寬度和高度為100%,我們使用object-fit: cover;
來讓圖片始終覆蓋整個容器,但是只顯示圖片的部分,這樣,我們就可以實現(xiàn)只顯示圖片的部分而不影響容器的布局。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。