當(dāng)我們需要放大一張圖片時(shí)，最簡(jiǎn)單的方法是用CSS設(shè)置它的寬高。可是這種方法卻會(huì)讓圖片跑到文檔流中的特定位置，這時(shí)您可能需要脫離文檔流。下面是一些居中放大圖片的CSS技巧。

/* 下面是CSS居中放大圖片的代碼 */
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
position: relative;
z-index: 1;
transition: transform .3s ease;
}
.img-container::before {
content: "";
display: block;
padding-top: 100%;
}
.img-container:hover img {
transform: scale(1.2);
z-index: 2;
}

上述代碼通過(guò)設(shè)置圖片的position屬性為relative，使其相對(duì)父元素的位置可變，并且添加了一個(gè)偽元素::before，用于保持父元素的縱橫比例。接著，當(dāng)我們懸停在圖片上時(shí)，通過(guò)使用transform將圖片放大，并設(shè)置z-index屬性使其位于頂層。

如果您需要支持IE，可以使用擁有更多前綴的CSS動(dòng)畫(huà)。

/* 應(yīng)用于IE的CSS動(dòng)畫(huà)代碼 */
.img-container img {
-ms-transform-origin: center center;
-ms-transition: all .3s ease;
-webkit-transform-origin: center center;
-webkit-transition: all .3s ease;
transform-origin: center center;
transition: all .3s ease;
}
.img-container:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

上述代碼與前一個(gè)代碼塊相同，只是添加了IE瀏覽器的支持。

總的來(lái)說(shuō)，您可以使用這些CSS技巧以更好的方式展示您的圖片，并且脫離文檔流。您可以通過(guò)觀察并嘗試上述代碼，來(lái)更深入了解它們的工作原理。