CSS中的縮放圖片是一個非常實用的技巧，它可以讓我們在不改變圖片源文件的情況下，輕松地改變圖片的大小。下面就讓我們來學習一下如何使用CSS來縮放圖片。

// HTML代碼
<img src="example.jpg" alt="example">
// CSS代碼
img {
width: 50%;
height: auto;
}

通過上面的代碼，我們將圖片的寬度設置為其原本寬度的50%。同時我們將高度設置為“auto”，這樣瀏覽器就會自動計算出適應圖片寬度的高度。如果只設置寬度而不設置高度，則圖片將會被拉伸或壓縮變形，從而失去其原本的比例。

除了像上面這樣直接設置圖片寬度之外，我們還可以利用CSS的“background-size”屬性來控制圖片的大小。這個屬性可以用于背景圖像或在CSS中以“background-image”屬性指定的圖片。示例代碼如下：

// HTML代碼
<div class="example"></div>
// CSS代碼
.example {
background-image: url("example.jpg");
background-size: 50% auto;
background-repeat: no-repeat;
width: 50%;
height: 300px;
display: inline-block;
}

在上面的代碼中，我們將圖片作為背景圖像，然后設置了它的大小為原本大小的50%。同時，我們也為div元素設置了寬度和高度，而且將它的display屬性設置為“inline-block”，以保證其尺寸不會超出設定的范圍。

不管是使用什么方式，縮放圖片都是一個簡單而實用的技巧。它可以讓我們在處理網頁中的圖片時更加靈活、自由，同時也無需擔心圖片的質量和清晰度。