1. 程式人生 > >CSS 圖片居中顯示不變形,顯示圖片中間部分

CSS 圖片居中顯示不變形,顯示圖片中間部分

<div style="background-image:url(這裡填寫圖片的路徑});
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
width:165px;height:105px;">
</div>	


其他屬性沒什麼可說的,不懂自己百度,

最後一個屬性,值得注意的兩個值:cover和contain

因為w3school說的有點繞, 簡單說明一下

cover:讓圖片填充滿父節點,超出部分隱藏,僅顯示中間,這才是我們想要的效果。

contain:讓圖片根據父節點寬高等比例縮放。