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

前端之家收集整理的这篇文章主要介绍了CSS:如何从中心而不是左上角缩放图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我的问题是我有一个图像,我设置它的CSS有一个
max-width: 100%

它以较低的分辨率进行缩放(如下面的小提琴所示).我想要的是过渡从图像中心生效.

目前;从我从大多数情况看到的我所做的涉及比例的过渡,他们从左上角扩展.

这是我的小提琴:http://jsfiddle.net/Eolis/3ya98xh8/3/

解决方法

只需更换宽度:400px; transform: scale(2,2) on:悬停.
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>

猜你在找的CSS相关文章