CSS自動圖片放大效果是一種常用的網(wǎng)頁設(shè)計(jì)技巧，可用于增強(qiáng)頁面的視覺效果和用戶交互體驗(yàn)。下面介紹如何通過CSS實(shí)現(xiàn)這一效果。

.img-box {
position: relative;
display: inline-block;
overflow: hidden;
}
.img-box img {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
max-height: 100%;
max-width: 100%;
}
.img-box:hover img {
transform: scale(1.1);
}

首先需要創(chuàng)建一個容器（p標(biāo)簽），并將其設(shè)置為相對定位（position: relative）。然后，將顯示圖片的元素（img標(biāo)簽）設(shè)置為絕對定位（position: absolute），這樣就可以控制其顯示大小和位置。接著，設(shè)置容器的寬度和高度，并將其overflow屬性設(shè)置為hidden，使圖片超出容器邊界時被截?cái)喽粫@示出來。

為圖片添加過渡效果可以使用transition屬性，當(dāng)用戶 hover（鼠標(biāo)懸停）在圖片上時，調(diào)用transform放大圖片。

這里使用max-height和max-width屬性是為了保證圖片最大不會超出容器的高度和寬度，同時保證圖片的比例不變。

如上所述，使用CSS自動圖片放大效果是一種簡單而有用的技巧。 有了這個技巧，您可以更好地優(yōu)化頁面的視覺效果和提高用戶交互體驗(yàn)。