在CSS中,當(dāng)您想要縮放圖片并保持中心位置時(shí),可以使用transform
屬性中的scale
函數(shù)來實(shí)現(xiàn),由于CSS的變換原點(diǎn)(transform-origin)默認(rèn)是元素的中心,因此您無需特別指定中心位置。
以下是一個(gè)簡(jiǎn)單的例子,展示如何縮放圖片并保持中心位置:
<img id="myImage" src="path-to-your-image.jpg" style="width: 200px; height: 200px;">
#myImage { transform: scale(0.5); /* 將圖片縮放到原來的50% */ }
在這個(gè)例子中,圖片會(huì)縮放到原來的50%,并且保持中心位置不變,您可以通過調(diào)整scale
函數(shù)的參數(shù)來控制縮放的倍數(shù)。
如果您想要改變變換的原點(diǎn)(transform-origin),可以使用以下CSS屬性:
#myImage { transform-origin: top left; /* 變換原點(diǎn)移動(dòng)到圖片的左上角 */ transform: scale(0.5); /* 將圖片縮放到原來的50% */ }
在這個(gè)例子中,即使圖片被縮放,變換原點(diǎn)也會(huì)保持在圖片的左上角,而不是默認(rèn)的中心位置,您可以根據(jù)需要調(diào)整transform-origin
的值來指定不同的變換原點(diǎn)。