在網頁中，經常會出現需要放大和縮小圖片的需求。這時候我們就需要用到CSS實現圖片的放縮。

首先，我們需要定義一個包含圖片的div容器

<div class="img-container">
<img src="example.jpg">
</div>

接下來，我們可以使用CSS的transform屬性來進行放縮操作。其中，縮放比例可以使用百分比或者數值表示。

.img-container img{
transform: scale(0.5); /* 縮小50% */
}
.img-container:hover img{
transform: scale(1.5); /* 放大150% */
}

當鼠標懸停在圖片上時，圖片會進行放大，當鼠標移出圖片時，圖片恢復原始大小。

另外，我們也可以使用CSS3新增的transition屬性來實現平滑過渡。

.img-container img{
transform: scale(0.5); /* 縮小50% */
transition: transform 0.3s ease-in-out; /* 過渡時間0.3秒，緩動函數為ease-in-out */
}
.img-container:hover img{
transform: scale(1.5); /* 放大150% */
}

這樣，圖片的放縮就可以實現了。