CSS 單擊圖片放大 在網頁設計中，常常需要在頁面中添加一些圖片，以豐富頁面內容，但有時候圖片的大小不太適合頁面的布局，如果將其直接縮小，會影響圖片內容的呈現和用戶的瀏覽體驗。那么如何在不改變原有圖片大小的情況下實現圖片放大效果呢？這就需要用到 CSS 魔術了。 首先，我們需要準備一張圖片： ```

點擊圖片可以放大哦！

<img src="someimage.jpg" alt="圖片">

``` 接下來，我們可以通過 CSS 的 :hover 偽類來實現當鼠標懸停在圖片上時，可以放大圖片的效果： ``` img:hover { transform: scale(1.2); } ``` 這段代碼意思是，使圖片放大 1.2 倍，當鼠標懸停在該圖片上時，便會發生錯覺，覺得圖片在放大。 但是你仔細看之后發現，僅僅是一個懸停，我們如何實現點擊放大呢？那么我們需要下面的代碼： ``` img:active { transform: scale(2); transition: transform 0.3s; } ``` 這里，我們通過 :active 偽類來實現圖片點擊后放大 2 倍的效果，同時還添加了 CSS 的 transition 屬性，以實現過渡效果，讓用戶感覺圖片的放大是一個平滑的過程。 當然，這只是一個基礎的圖片放大方法，我們可以通過細微的調整來使代碼更符合我們的需求，比如使放大的動畫更流暢、實現縮小功能等等。 總而言之，這種點擊取得焦點并且放大圖片的功能能完美的應用在網站的圖片上。