CSS是一種非常強大的工具，它可以讓網頁變得更加美觀和易于使用。其中之一的功能是可以自動縮放和放大圖片。在本文中，我們將詳細介紹CSS如何實現自動放大和縮小圖片。

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

這段CSS代碼可以讓圖片自動縮放，而不會失真。代碼解釋：max-width: 100%； 這將確保圖片的大小不會超出其父容器的大小。height: auto; 則確保圖片的高度會自動調整以保持比例。

現在來看一個例子：

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

在這個例子中，我們將在一個div中插入一張名為example.jpg的圖片。我們可以使用上面的CSS代碼來自動處理它的大小。

我們還可以將鼠標懸浮在圖片上時自動放大它：

img:hover {
transform: scale(1.1);
}

這個代碼塊會在鼠標懸浮在圖片上時將其放大1.1倍。這看起來非常酷，同時也增加了用戶的互動性。

需要注意的是，使用自動縮放和放大的圖片必須是高分辨率的圖片，并且需要優化。否則，它們可能會導致頁面延遲加載和顯示問題。

CSS的自動縮放和放大圖片功能可以讓網頁的設計變得更加逼真和吸引人，同時也增加了用戶的互動性。使用此功能需要注意圖片的大小和優化，以確保頁面的性能。