在網(wǎng)頁設(shè)計(jì)中，經(jīng)常需要用到圖片來豐富頁面內(nèi)容。然而，在不同的屏幕尺寸和設(shè)備上顯示圖片時(shí)，圖片的尺寸也會相應(yīng)改變，從而影響頁面的美觀度和用戶體驗(yàn)。這時(shí)，我們通常會使用CSS來控制圖片的顯示效果，其中一個(gè)重要的問題是如何設(shè)置圖片的比例不變。

在CSS中，可以通過設(shè)置圖片的寬度和高度來控制其尺寸，但如果只設(shè)置一項(xiàng)，圖片的比例就會被打亂。比如，如果將寬度設(shè)置為100%，高度設(shè)置為auto，那么在不同尺寸的屏幕上，圖片的寬度將會自適應(yīng)于頁面寬度，高度則會按照原比例自動計(jì)算，保證圖片不變形。

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

同樣，如果只設(shè)置高度，而寬度不變，則圖片也會按照原比例自動計(jì)算。

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

總之，如果想要保證圖片在不同屏幕和設(shè)備上比例不變，可以采用以上CSS代碼來設(shè)置圖片的寬度和高度。這樣，就可以讓圖片根據(jù)頁面寬度自動適應(yīng)尺寸，同時(shí)保持原比例，展現(xiàn)最佳效果。