CSS：如何从中心而不是左上方缩放图像

一尘不染

CSS：如何从中心而不是左上方缩放图像

css

所以我的问题是我有一个图片，并将其CSS设置为

max-width: 100%

它以较低的分辨率缩放（如下面的小提琴所示）。我想要的是使过渡从图像的中心生效。

目前; 从我在大多数涉及规模的过渡中所见，它们从左上角开始扩展。

阅读 385

2020-05-16

共1个答案

一尘不染

只需替换width: 400px;为transform:scale(2,2)on即可:hover。

img {

    width: 100%; max-width: 100%;

}

div {

    position: absolute; left: 20%; top: 20%;

    width: 250px;

    transition: all 2s ease-in-out;

}

div:hover {

    transform: scale(2,2)

}


<div>

    <a href="http://photobucket.com/images/cat" target="_blank">

        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>

    </a>

</div>

2020-05-16