CSS：如何从中间而不是从左上角缩放图像

所以我的问题是，我有一个图像，我设置它的CSS有一个

max-width: 100% 

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

目前,；从我所看到的大多数涉及缩放的变换中，它们从左上角展开

---

这是我的小提琴：

只需更换

宽度：400px打开时
：悬停


img{
宽度：100%；最大宽度：100%；
}
div{
位置：绝对位置；左侧：20%；顶部：20%；
宽度：250px；
过渡：所有2个易于输入输出；
}
div:悬停{
变换：比例（2,2）
}
将其添加到
div:hover
：

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

这是提琴：
如果我的解决方案对任何人都有帮助，不妨把它扔掉：

：：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;
}

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

：：HTML:：

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

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



：：小提琴：：
不要忘记设置变换原点


.current{
顶部：0px；
左：0px；
z指数：2；
不透明度：1；
变换：比例（0.9,0.9）；
过渡：不透明度1.6s缓和0s，变换7.2s线性0s；
变换原点：中心；
动画：正常；
}
我知道可能存在重复的oh。那很好。不完美，但可以使用适当的%值进行完善。谢谢这也给了我一个使用边距的想法，我在这里用另一种方法更新了我的小提琴：它本应该是完美的，但我不知道为什么它会有一点变化。这里有一个更好的方法：。这里您不必使用任何硬编码的值。这里有一个更好的方法：。在这里，您不必使用任何硬编码值。transform-origin:center@oCcSking它是默认值
默认值：50%50%0
与规范
初始值50%50%0
中的一样。