在Web開發(fā)中，經(jīng)常需要將圖片放置在某個(gè)框內(nèi)，而網(wǎng)頁(yè)框架可能各不相同。這里介紹一種在CSS中，讓圖片填充到框內(nèi)的方法。

.example {
display: flex; /*設(shè)置父容器為flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.example img {
max-width: 100%; /*設(shè)置圖片最大寬度為容器寬度，自適應(yīng)高度*/
max-height: 100%; /*設(shè)置圖片最大高度為容器高度，自適應(yīng)寬度*/
}

上面的代碼中，首先將容器的display屬性設(shè)置成了flex布局。這樣一來(lái)，子元素（圖片）會(huì)自動(dòng)居中。我們通過(guò)justify-content屬性和align-items屬性將其分別水平居中和垂直居中。

而圖片在被父容器包裹后，我們需要通過(guò)CSS設(shè)置其寬度和高度。通過(guò)設(shè)置max-width屬性和max-height屬性為100%，可以讓圖片的最大寬度和最大高度都填充為容器的寬度和高度，實(shí)現(xiàn)圖片填充到框內(nèi)的效果。

需要注意的是，在某些瀏覽器中，CSS的flex布局可能需要加上前綴。比如，在Chrome瀏覽器中的代碼就需要這樣寫：

.example {
display: -webkit-flex; /*兼容Chrome瀏覽器*/
display: flex;
-webkit-justify-content: center; /*兼容Chrome瀏覽器*/
justify-content: center;
-webkit-align-items: center; /*兼容Chrome瀏覽器*/
align-items: center;
}

在實(shí)際開發(fā)中，要根據(jù)需要進(jìn)行微調(diào)。比如，如果圖片較小，則不需要填充滿容器，可以通過(guò)設(shè)置min-width屬性和min-height屬性來(lái)實(shí)現(xiàn)。