CSS中的圖片等比縮小是前端開發中常用的技巧，下面我們來介紹一下如何進行樣式設計。

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

以上是最基本的CSS樣式，將所有圖片的最大寬度設為100%，高度自適應。這樣可以確保當圖片尺寸超過頁面寬度時，圖片不會出現溢出現象，而是按比例縮小至適合頁面顯示。

有時候，我們可能需要對圖片進行一些特殊處理，比如讓圖片始終顯示為正方形：

.square-img {
width: 100%;
padding-bottom: 100%; /*設置padding的百分比是根據寬度計算*/
background-repeat: no-repeat; 
background-size: cover;
background-position: center center;
}

以上代碼中，我們將寬度設置為100%，高度設為0，并為圖片添加一個padding-bottom百分比值。由于padding的百分比是根據元素寬度進行計算的，因此這樣做可以確保圖片寬高比始終為1:1。

為了讓圖片居中顯示，我們可以使用background-repeat和background-position來調整其位置，而background-size則可以確保圖片始終占用整個div的空間。

以上就是CSS中圖片等比縮小的一些技巧，希望對大家有所幫助。