CSS中經常使用圖片來美化網頁的外觀，但是我們需要確保圖片的顯示比例不會改變。在不同的屏幕上，圖片可能會被拉伸或者壓縮，導致失真的效果。為了避免這種情況，我們需要使用等比縮放來確保圖片保持原有的比例。

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

在上述的代碼中，我們先使用max-width屬性將圖片的最大寬度設置為100%，這意味著圖片不會超過容器的寬度。接著，使用height:auto屬性保持圖片在等比例縮放的情況下，高度自適應。

在移動設備和PC上的屏幕比例是不同的，因此我們需要確保在不同的分辨率下，圖片顯示的大小是正確的。我們可以使用響應式網頁設計來自動適應不同的設備和屏幕比例。

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

在上述代碼中，我們使用@media規則來指定不同屏幕尺寸的樣式，以便于適應移動設備和PC。當屏幕寬度小于768像素時，圖片會設置為最大寬度為100%；當屏幕寬度大于769像素時，圖片會設置為最大寬度為50%。這樣可以確保圖片在各種設備和屏幕大小下都可以正常顯示，同時保持正確的比例。

在CSS中處理圖片和屏幕比例是很重要的一項工作，我們應該牢記利用等比縮放和響應式設計等技術，保證網頁的美觀和可訪問性。