CSS 在布局中扮演重要的角色，尤其在處理圖片時有著不可替代的作用。對于需要將圖片進行等比例縮小的情況，我們可以使用 CSS 中的 max-width 屬性輕松解決。

首先，在 HTML 代碼中需要用 img 標簽引入需要縮小的圖片：

<img src="example.jpg" alt="example">

接著，在 CSS 代碼中，我們可以為 img 元素添加 max-width 屬性來限制其最大寬度，從而實現等比例縮小的效果：

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

其中，max-width: 100% 意味著圖片最大寬度為其容器的寬度，在縮放時保持等比例。height: auto 則是為了保證縮放后的圖片高度不會變形。

最后，我們就可以看到圖片等比例縮小的效果啦：

<div class="example">
<img src="example.jpg" alt="example">
</div>
.example {
width: 500px;
}
img {
max-width: 100%;
height: auto;
}

以上代碼中，.example 類用來設置容器的寬度為 500px，而 img 元素則通過 max-width 和 height 屬性實現等比例縮放。

總的來說，使用 CSS 的 max-width 屬性可以輕松實現圖片的等比例縮小，是頁面布局中必不可少的一部分。