在網(wǎng)頁(yè)設(shè)計(jì)中，圖片的顯示尺寸是很重要的，有時(shí)候我們需要將圖片放大或縮小以適應(yīng)頁(yè)面大小，但是我們又不能讓圖片失真變形。這時(shí)候，我們可以使用 CSS 來(lái)實(shí)現(xiàn)圖片等比例縮放。

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

這段 CSS 代碼在圖片的樣式表中引用時(shí)，可以自動(dòng)將圖片的寬度設(shè)置為其容器元素的最大寬度，同時(shí)根據(jù)原始圖片的寬高比例自動(dòng)調(diào)整圖片的高度。

例如：

<div style="width: 600px;">
<img src="example.jpg" alt="Example">
</div>

在這個(gè)例子中，容器元素的最大寬度為 600 像素，圖像的原始尺寸為 800x600 像素。瀏覽器將自動(dòng)調(diào)整圖像的大小，以適應(yīng)容器元素的寬度，同時(shí)保持其原始寬高比例，結(jié)果圖像的顯示尺寸為 600x450 像素。

這種方法非常簡(jiǎn)單且易于使用，是實(shí)現(xiàn)圖片縮放的最佳選擇之一。