CSS 中的圖片中心點縮放是一項非常有用的技巧，它能夠讓我們在網(wǎng)頁中靈活地控制圖片的大小和位置，同時不會失去圖片的質(zhì)量。在下面的代碼中，我們將會使用 CSS transform 屬性中的 scale 函數(shù)和 transform-origin 屬性來實現(xiàn)這個效果。

/* 首先，我們需要給圖片設(shè)置一個默認(rèn)尺寸和位置 */
img {
width: 300px;
height: 300px;
margin: 0 auto;
}
/* 接下來，我們需要在 hover 事件中改變圖片的大小 */
img:hover {
transform: scale(1.5); /* 將圖片放大 1.5 倍 */
transform-origin: center center; /* 圖片的中心點縮放 */
}

在上面的代碼中，我們首先給圖片設(shè)置了一個默認(rèn)的尺寸和居中的位置。然后，在 hover 事件中，我們使用了 transform 屬性中的 scale 函數(shù)來將圖片放大 1.5 倍。為了讓圖片以中心點縮放，我們還需要使用 transform-origin 屬性來將縮放的中心點設(shè)置為圖片的中心。

如果我們想要讓圖片向左或向右偏移一些，我們可以通過調(diào)整 transform-origin 屬性來實現(xiàn)：

/* 將圖片的縮放中心點左移 30% 和上移 50% */
img:hover {
transform: scale(1.5);
transform-origin: 30% 50%;
}

通過這種方式，我們可以在網(wǎng)頁中輕松地實現(xiàn)圖片的縮放和位置調(diào)整，讓我們的頁面更加靈活和美觀。