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

问题

So my problem is that I have an image and I set its CSS to have a

max-width: 100%

which scales it at lower resolutions ( as will be seen in the fiddle below ). What I want is for the transition to take effect from the center of the image.

Currently; and from what I have seen from most the transitions I have done involving scale they expand from the top-left corner.

here is my fiddle: http://jsfiddle.net/Eolis/3ya98xh8/3/

回答1:

Just replace width: 400px; with 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>

回答2:

Add this to the div:hover:

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

Here is the Fiddle: http://jsfiddle.net/3ya98xh8/4/

回答3:

may as well throw my solution up in case it is helpful to anyone:

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

来源：https://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-the-center-instead-of-top-left

标签

css

scale

center

transition