在网页设计中，使用 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属性或者计算出图片的宽高比例来实现等比例缩放。这样可以让页面在不同设备上展现出更清晰、更美观的效果。