CSS: 如何从中心而不是左上角缩放图像

Question

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

max-width: 100%

以较低的分辨率对其进行缩放（如下面的 fiddle 所示）。我想要的是让过渡从图像的中心开始生效。

目前；从我所做的大多数涉及比例的过渡中，我看到它们从左上角展开。

这是我的 fiddle：http://jsfiddle.net/Eolis/3ya98xh8/3/

Answer 1

只需在 :hover 上将 width: 400px; 替换为 transform: scale(2,2)。

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>

Answer 2

将此添加到 div:hover:

transform: translateX(-25%) translateY(-25%);

这是Fiddle：http://jsfiddle.net/3ya98xh8/4/

Answer 3

不妨抛出我的解决方案，以防对任何人有帮助：

::CSS::

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 50%; top: 50%;
    margin-left: -125px; margin-top: -100px;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    margin-left: -200px; margin-top: -150px;
    width: 400px;
}

::HTML::

<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>

::Fiddle:: http://jsfiddle.net/Eolis/3ya98xh8/5/

Answer 4

别忘了设置 transform-origin

.current{
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 1;
    transform: scale(0.9, 0.9);
    transition: opacity 1.6s ease-out 0s, transform 7.2s linear 0s;
    transform-origin: center center;
    animation: normal;
}

https://css-tricks.com/almanac/properties/t/transform-origin/

CSS: 如何从中心而不是左上角缩放图像

CSS: How to scale an image from the center instead of top-left

css

transition

center

scale