CSS 是萬能的美化網頁的神器，而且它也可以幫助我們解決圖片適配手機屏幕的問題。下面我們就來詳細介紹一下。

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

以上代碼就是解決圖片適配手機屏幕的核心代碼。我們通過設置圖片的最大寬度為 100%，這樣當圖片的實際寬度大于手機屏幕的寬度時，圖片就會自動縮小至手機屏幕的寬度，并且保持寬高比不變。而設置圖片的高度為 auto 則可以確保圖片的高度按比例自適應。

除此之外，我們也可以通過媒體查詢的方式為不同屏幕尺寸設置圖片的樣式，以達到更好的顯示效果。

@media screen and (max-width: 767px) {
img {
max-width: 100%;
height: auto;
}
}
@media screen and (min-width: 768px) {
img {
max-width: 50%;
height: auto;
}
}

以上代碼表示如果屏幕寬度小于等于 767px，圖片就按照前面提到的核心代碼進行縮放，如果屏幕寬度大于等于 768px，則將圖片最大寬度設置為屏幕寬度的 50%，以達到更好的效果。

總的來說，通過 CSS 設置圖片適配手機屏幕是比較簡單的，只需要設置圖片的最大寬度為 100% 和高度為 auto，如果需要更精細的控制，則可以使用媒體查詢的方式為不同屏幕尺寸設置不同的樣式。希望本文能幫助大家更好地應對圖片適配手機屏幕的問題。