在網頁設計中，使用 CSS 可以讓我們輕松地調整頁面的樣式和布局。尤其是在圖像的大小上，等比例縮放是一種非常有用的方案。下面，我們將詳細介紹 CSS 中如何實現等比例縮放。

首先，讓我們看一個典型的圖像縮放的例子：

img{
width: 300px;
height: 200px;
}

這樣設置的結果是將圖片縮放到了給定的大小，但是如果原始圖片的寬高比例和 300px x 200px 不一致，就會出現拉伸或壓縮的情況，導致圖片失真。

為了實現等比縮放，我們需要設置一個寬高比例，然后將其應用到圖片的寬度上。比如，假設我們的圖片寬高比例為 2:1，則可以這樣設置：

img{
width: 300px;
height: auto;
aspect-ratio: 2/1;
}

這里使用的是aspect-ratio屬性，它指定了寬度與高度的比例。另外，為了避免高度超出容器，我們還要將高度設置為自動，這樣瀏覽器就會根據寬度自動計算出圖像的高度。

除了使用aspect-ratio屬性，我們還可以通過計算出圖片的寬高比例，直接應用到樣式代碼中。

img{
width: 300px;
height: calc(300px * 0.5);
}

這里使用的是calc()函數，它可以在 CSS 中進行簡單的計算操作。這個例子中，我們將圖片的寬度設為 300px，然后使用 calc() 計算出圖片的高度，即寬度的 0.5 倍。

總結一下，等比縮放對于網頁設計而言是非常重要的。我們可以使用aspect-ratio屬性或者計算出圖片的寬高比例來實現等比例縮放。這樣可以讓頁面在不同設備上展現出更清晰、更美觀的效果。