在網頁設計中，圖片的適應屏幕尺寸是很重要的。下面我們將介紹如何使用CSS代碼使圖片適應不同尺寸的屏幕，以達到更好的用戶體驗。

/*圖片寬度自適應*/
img {
max-width: 100%;
height: auto;
}
/*背景圖片自適應*/
.background-image {
background: url('img/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
/*響應式圖片*/
@media only screen and (max-width: 600px) {
.responsive-image {
background: url('img/responsive.jpg');
background-size: cover;
background-repeat: no-repeat;
}
}

以上代碼中，第一個部分是使圖片寬度自適應，即圖片最大寬度為100%并保持比例不變；第二個部分是使背景圖片自適應，即圖片大小覆蓋整個背景且不重復出現；第三個部分是使用媒體查詢制作響應式圖片，即在屏幕寬度小于600像素時使用另一張圖片。

通過上述代碼，我們可以在設計網頁時更好地控制圖片的適應性，提高用戶體驗，使網頁更具吸引力和互動性。