在網(wǎng)頁制作中，常常需要插入圖片。但是，不同的圖片大小可能會不一樣，如果不設(shè)定寬高，則會顯得不協(xié)調(diào)。此時，我們可以使用CSS讓圖片大小自適應(yīng)。

CSS中有一個屬性叫作max-width，它能夠讓圖片在不超出其容器內(nèi)的限制下進(jìn)行自動縮放。我們可以將max-width屬性設(shè)置為100%即可。

img{
max-width:100%;
}

如果我們想要圖片在縮放之后依然保持原有的比例，那么我們可以將max-height屬性也設(shè)置為100%。

img{
max-width:100%;
max-height:100%;
}

此外，我們還可以利用CSS3中的object-fit屬性來調(diào)整圖片的大小。object-fit屬性可以設(shè)置圖片的填充模式，包括：fill、contain、cover、none和scale-down五個值。

• fill：強(qiáng)制將圖片填滿整個容器，如果圖片與容器比例不同則會發(fā)生拉伸或壓縮
• contain：自適應(yīng)縮放圖片以保證圖片完全顯示在容器中，可能會留有空白
• cover：自適應(yīng)縮放圖片以保證圖片完全覆蓋容器，可能會截取部分圖片
• none：不進(jìn)行任何填充，保持原有大小
• scale-down：對于要縮小的圖像，它與contain對應(yīng)，但如果要放大，則與cover屬性對應(yīng)。

舉個例子，我們可以這樣設(shè)置：

img{
width:200px; 
height:200px;
object-fit:contain;
}

這樣設(shè)置會將圖片自適應(yīng)縮放，并在容器內(nèi)居中顯示。

通過以上方法，我們可以輕松讓圖片大小自適應(yīng)，并且使得網(wǎng)頁看起來更加整潔美觀。