在網頁中,有時候我們需要將一張圖片占滿整個<div>
,但是圖片的大小卻不合適,這時我們可以使用 CSS 來實現。
CSS 中有一個background-size
屬性,可以控制背景圖片的尺寸。通過設置此屬性為cover
,可以讓背景圖片占滿整個容器,而不會失真。
div { background-image: url("example.jpg"); background-size: cover; }
上面的代碼可以將容器的背景設置為一張圖片,并使圖片占滿整個容器。如果圖片的寬高比例不同,可能會出現部分顯示不全的情況。我們可以使用background-position
屬性來控制圖片的位置。
div { background-image: url("example.jpg"); background-size: cover; background-position: center; }
上面的代碼將圖片的位置設置為居中。如果想要圖片在容器的左上角,可以將background-position
設置為0 0
。
不過需要注意的是,background-size
屬性在 IE8 及以下版本的瀏覽器中不支持。