CSS自適應圖片是現代網頁設計的重要技巧之一，可以讓我們的網站更具可讀性和視覺吸引力。在本文中，我們將討論如何使用CSS實現自適應圖片。

在過去，我們通常使用像素值來設置圖片的大小，這通常會導致圖片在不同設備上顯示不同的大小。為了解決這個問題，我們可以使用相對單位，如em或百分比。

/* 簡單的圖片調整 */
img {
width: 100%;
height: auto;
}

此代碼將使圖片在其容器中自適應，保留其寬高比例。在這個例子中，圖片的寬度將填充其容器的寬度。

我們還可以使用CSS media查詢和不同的圖像尺寸來為不同的設備提供不同的圖片。

/* 不同設備對應的不同的尺寸 */
img {
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
img {
max-width: 50%;
}
}
@media screen and (min-width: 1024px) {
img {
max-width: 30%;
}
}

在這個例子中，我們使用了@media查詢以根據屏幕大小選擇不同的最大寬度。這使我們可以針對具體的設備優化圖片大小。

總之，CSS可以讓我們輕松地實現自適應圖片，并為不同的設備優化我們的圖片。為了讓你的網頁更具吸引力和專業性，請快快應用CSS自適應圖片技巧吧！