CSS點擊圖片成比例放大

img {
transition: transform 0.5s;
}
img:hover {
transform: scale(1.5);
}

在web設計中，很多時候需要實現點擊圖片放大來展示更多的細節。為了保證圖片放大后不會失真變形，需要用到CSS中的transform屬性。

首先，在CSS中設置圖片的過渡效果，因為我們希望圖片放大時有一個平滑的過渡效果。

img {
transition: transform 0.5s;
}

然后，在圖片的:hover狀態下，使用transform: scale()屬性來放大圖片。在括號里的數值可以自由調整，但是需要保證放大后的比例不能失真。

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

將以上兩段代碼組合起來，就可以完成CSS點擊圖片成比例放大效果。