CSS 頁面圖片自適應是網站設計中非常常見的一種技術，它可以讓圖片在不同大小的屏幕上被自動縮放，從而避免圖片在過大或過小的屏幕上出現許多空白區域。下面我們就來看一下如何通過 CSS 頁面圖片自適應來完成這個功能。

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

上述 CSS 代碼是實現圖片自適應的核心，通過設置圖片的最大寬度為 100%，即使用屏幕大小來限制圖片的大小，而圖片的高度則自動保持比例不變。這將確保圖片始終可以在不同屏幕大小下正常顯示。

除了上述代碼以外，我們還可以在某些特定的情況下對圖片進行進一步的處理。例如，當我們希望圖片在移動端的屏幕上顯示更小一些時，可以使用如下 CSS 代碼：

@media only screen and (max-width: 600px) {
img {
max-width: 300px;
height: auto;
}
}

上述代碼表示，當屏幕寬度小于等于 600px 時，圖片的最大寬度將被設置為 300px。這將確保圖片在小屏幕上正常顯示，而不會因為過大而影響用戶體驗。

總的來說，通過 CSS 頁面圖片自適應，我們可以讓網站的圖片在不同的屏幕大小下都能夠正常顯示，從而提升網站的用戶體驗。