自適應圖片是現代網站設計中非常重要的一部分。隨著用戶設備的多樣化，如何讓網站中的圖片適配不同分辨率的屏幕成為了一個必須考慮的問題。CSS提供了多種方法，可以幫助我們創建自適應圖片。

下面是一個使用CSS實現自適應圖片的例子：

.image-container {
width: 100%;
max-width: 500px;
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container:before {
content: "";
display: block;
padding-top: 75%; /* 圖片高度 / 圖片寬度 x 100% */
}

以上代碼中，我們首先設置了圖片容器的寬度最大為500像素，然后將圖像的寬度設置為100％，高度設為自適應。最后，我們使用:before偽元素為容器添加一個高度占位符，以防止圖像在加載之前破壞頁面布局。

使用這個方法，圖片將根據其父容器的大小進行縮放，從而在不同設備上顯示出最佳效果。在移動設備上，圖片將被縮小以適應窄屏幕的寬度，并且不會超出屏幕寬度。

總結來說，CSS提供了多種技術，用于創建自適應圖片。在移動優先的設計趨勢下，確保網站圖片能在不同屏幕大小和分辨率下顯示良好變得越來越重要。通過根據父容器的大小縮放圖片，我們可以為用戶提供更好的體驗和可訪問性。