在網(wǎng)頁(yè)中，常常需要將一張圖片放在一個(gè)div中，讓圖片充滿整個(gè)div，但是圖片又不能拉伸變形。這時(shí)候我們可以使用CSS來實(shí)現(xiàn)這個(gè)效果。

div{
position: relative;  //相對(duì)定位
width: 300px;
height: 200px;
overflow: hidden;
}
img{
position: absolute;  //絕對(duì)定位
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  //將圖片居中
width: auto;
height: 100%;  //高度100%，寬度自適應(yīng)
}

讓我們來看一下上面的代碼怎么實(shí)現(xiàn)的：

首先，我們定義了一個(gè)div元素，設(shè)置它的寬度為300px，高度為200px，并將overflow設(shè)為hidden，這樣圖片就不會(huì)超過這個(gè)div的大小。

接著，我們定義了一個(gè)img元素，并將它的position屬性設(shè)置為absolute，這樣它就可以根據(jù)父元素進(jìn)行定位。top和left值為50%，這代表圖片的中心點(diǎn)要和父元素的中心點(diǎn)對(duì)齊。transform屬性的translate函數(shù)將圖片向上和向左移動(dòng)50%，這樣圖片就能完全放到div里面了。width屬性設(shè)為auto，表示寬度根據(jù)圖片的比例自適應(yīng)，height屬性設(shè)為100%，表示圖片的高度要充滿整個(gè)div。

這樣我們就能讓一張圖片充滿整個(gè)div了。