在網(wǎng)頁(yè)設(shè)計(jì)中，照片是必不可少的元素之一。然而，在不同設(shè)備上展示照片時(shí)，為了保持頁(yè)面的整潔和美觀，我們往往需要對(duì)照片進(jìn)行縮小處理。那么，如何通過CSS來讓照片按比例縮小呢？

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

可以看到，我們通過設(shè)置照片的最大寬度為100%來實(shí)現(xiàn)按比例縮放。同時(shí)，設(shè)置高度為auto可以保證照片的高度也按比例縮放，避免了圖片變形的問題。

在實(shí)際應(yīng)用中，我們可以根據(jù)不同設(shè)備的屏幕大小設(shè)置不同的最大寬度。例如，可以為設(shè)備屏幕寬度小于768px的移動(dòng)設(shè)備設(shè)置max-width為70%。

@media screen and (max-width: 768px) {
img {
max-width: 70%;
}
}

通過以上CSS代碼，我們就能夠輕松地實(shí)現(xiàn)照片按比例縮小的效果，讓我們的網(wǎng)頁(yè)在不同設(shè)備上都保持美觀和整潔。