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

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

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

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

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

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