隨著移動設備市場的增長，越來越多的網站需要適應不同的屏幕大小。CSS有一些功能可以幫助圖片隨屏幕大小自適應，接下來我們就來探討一下。

首先，讓我們來看看一種簡單的方法，即使用max-width屬性來控制圖片寬度。這種方法可以確保圖片最大寬度不超過指定的像素，同時在小屏幕上適當縮小圖片保證響應式設計。

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

接下來是一種更為高級的方法，即使用CSS的背景屬性來展現圖片。這種方法可以讓我們更精確地控制圖片在整個頁面中的位置和縮放比例。

div {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

在這個例子中，我們將圖片設置為div的背景，并使用background-size: cover屬性將其裁剪和縮放至完全覆蓋整個div。同時，我們使用background-position: center center屬性使圖片在水平和豎直方向上都居中。

最后，讓我們來檢查一下更為動態的方式，即使用CSS的picture元素來更靈活地處理不同分辨率和視口大小之間的變化。

<picture>
<source media="(min-width: 600px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="a beautiful image">
</picture>

在這個例子中，我們使用了picture標簽來為不同的屏幕尺寸提供不同的圖片版本。當視口的最小寬度超過600像素時，將加載大圖（large.jpg），當視口的寬度在400到600像素之間時，加載中圖（medium.jpg），否則加載小圖（small.jpg）。

通過這些方法，我們可以輕松地讓圖片適應不同大小的屏幕，并且在響應式設計中起到重要作用。