在網頁設計中，圖片素材是非常重要的一部分。為了使頁面的視覺效果更加出色，我們通常要對圖片進行調整大小操作。但是，如果圖片的形狀比例不正確，放大或縮小都會使其變形，影響頁面的視覺效果。

那么，如何實現圖片等比例縮放呢？CSS中提供了非常便捷的方法，讓我們來看看吧。

<style>
/* 定義一個寬為300px，高為200px的盒子 */
.box {
width: 300px;
height: 200px;
overflow: hidden;
}
/* 定義圖片樣式 */
.box img {
width: 100%;
height: auto;
}
</style>
<div class="box">
<img src="example.jpg" alt="">
</div>

上述代碼中，我們創建了一個類名為“box”的div容器，給其設定了一個可視寬度為300px，高度為200px，并為其添加了“overflow: hidden”屬性，使圖片不會超出容器范圍。

在類名為“box”的div中，我們嵌套了一個img標簽的圖片，并給img中的樣式添加了“width: 100%”和“height: auto”屬性。這樣，圖片就可以根據盒子的寬度自動適應高度，實現了圖片的等比例縮放。

需要注意的是，在使用該方法時，要保證圖片的原始比例正確。否則，我們在對其進行縮放時，會出現拉伸變形的情況。因此，在使用美工圖時，盡可能保證圖片素材的比例正確，可以避免未來在頁面設計中帶來的問題。

總的來說，使用圖片等比例縮放是網頁設計中非常重要的一個環節。通過CSS中的這種簡單易用的方法，我們可以輕松地實現圖片的等比例縮放，并呈現出更加美觀的視覺效果。