本文目錄導讀：

1. 使用CSS的width和height屬性
2. 使用CSS的transform屬性
3. 響應式設計

CSS技巧：等比例縮小圖片尺寸

在網頁設計中，我們經常需要調整圖片的尺寸以適應不同的布局和設計需求，當需要縮小圖片尺寸時，保持圖片的等比例是非常重要的，以免圖片變形，下面，我們將探討如何使用CSS實現圖片的等比例縮小。

使用CSS的width和height屬性

我們可以使用CSS的width和height屬性來設置圖片的尺寸，為了確保圖片等比例縮小，我們需要同時調整width和height的值。

img {
  width: 50%;  /* 將圖片的寬度設置為原始尺寸的50% */
  height: auto; /* 高度設置為auto，以保持圖片的等比例 */
}

在這個例子中，圖片的寬度被設置為原始尺寸的50%，而高度被設置為auto，這樣，瀏覽器會自動計算并調整高度，以保持圖片的等比例。

使用CSS的transform屬性

除了使用width和height屬性，我們還可以使用CSS的transform屬性來實現圖片的等比例縮小。

img {
  transform: scale(0.5); /* 將圖片縮小到原始尺寸的50% */
}

在這個例子中，我們使用scale函數將圖片縮小到原始尺寸的50%，同樣，瀏覽器會自動保持圖片的等比例。

響應式設計

對于響應式網頁設計，我們可能需要讓圖片在不同的屏幕尺寸下自動調整尺寸，這時，我們可以使用CSS的max-width和height屬性，或者媒體查詢來實現。

就是使用CSS實現圖片等比例縮小的方法，在實際應用中，我們可以根據具體的需求和場景選擇合適的方法，無論使用哪種方法，關鍵是要同時調整圖片的寬度和高度，以保持圖片的等比例。