在設計網頁時，圖片的自適應是非常重要的一個方面。當我們在開發網頁時，往往會發現在不同設備上顯示的圖片大小不同，而且有些圖片可能被拉伸或壓縮。這時候，CSS的圖片自適應功能就派上用場了。

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

如上所示，我們可以給img標簽添加CSS樣式，讓圖片自適應網頁的大小。其中，max-width設置了圖片的最大寬度為100%，也就是說圖片可以根據網頁的寬度進行縮放。而height則設置為auto，這樣就能保證圖片的高度與寬度保持比例。這些設置保證了圖片在不同設備上都能夠自適應，不被拉伸或壓縮。

還有一種情況需要特別注意，就是當圖片大小小于max-width時，我們需要讓圖片保持原來的大小。代碼如下：

img {
max-width: 100%;
height: auto;
width: auto\9; /*這是IE8及以下版本的hack，使其可以適應IE*/
}

通過為width屬性添加IE的hack，可以使得圖片在IE8及以下版本中，也能夠適應網頁大小。

CSS的圖片自適應功能可以幫助我們更好地設計網頁，使得圖片在各種設備上都能夠美觀地顯示。