有時候我們需要在網站中使用圖片，并且希望圖片能夠從中間以漸進方式放大，這樣可以讓頁面視覺效果更加吸引人。那么該怎樣實現呢？下面，我們來介紹一下使用CSS實現這個效果的方法。

.img-enlarge {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
overflow: hidden;
}
.img-enlarge img {
width: 100%;
height: 100%;
transform: scale(1);
transition: transform 0.5s ease-out;
}
.img-enlarge:hover img {
transform: scale(1.2);
}

如上代碼所示，我們首先將圖片容器設置為居中對齊的顯示方式，使用overflow: hidden屬性使得圖片超出容器不可見。同時給圖片設置一個默認的scale值，即scale(1)，表示圖片不放大不縮小，同時設置一個漸進的過渡時間，這是為了在圖片放大時有一個平滑的視覺效果。

接著，我們在鼠標懸停時使用:hover偽類來設置圖片放大的效果，即增加scale值，并且過渡到放大狀態的過程中使用設置好的過渡時間，使得動畫效果更加平滑。

有了這些代碼，我們就可以使用img標簽來顯示我們需要用的圖片，同時將其放置到.img-enlarge的容器中，即可實現中間放大效果。