CSS可以將小圖片轉換成可點擊的大圖片。實現這一效果，需要使用兩種方法：一是CSS中的背景圖像，另一個是使用HTML中的圖像。我們先來看看使用CSS中的背景圖像來做這件事的方法。

.small-img {
background-image: url('small-img.jpg');
width: 50px;
height: 50px;
cursor: pointer;
}
.small-img:hover {
background-image: url('big-img.jpg');
width: 200px;
height: 200px;
}

如上所示，我們首先定義了一個類名為small-img的CSS樣式，其中設置了小圖片的寬高和背景圖像。同時，我們也把鼠標光標設置為手形，這樣用戶就可以感知到這張小圖片是可點擊的。這個小圖片可能是一個收縮的圖標或者是縮略圖。

然后，我們定義了一個:hover偽類，以便當用戶將鼠標懸停在小圖片上時，可以將小圖片的樣式變成大圖片的樣式，從而實現了點擊后顯示大圖片的效果。這樣看起來就像是圖片變成了一張放大的圖片。

這個方法非常簡單而且易于實現，但小圖片必須是背景圖像。但如果我們想要使用HTML中的圖片來實現這一功能，又該怎么做呢？

在上面的代碼中，我們只需要在img標簽中添加一個onclick事件，以便當用戶單擊圖片時，可以將小圖片的src屬性替換成大圖片的src屬性。

這種方法的缺點是需要兩張圖片，并且有兩個請求。但是，這種方法的優點是匹配圖片尺寸相對簡單，并且URL可以動態生成。