CSS：如何从中心而不是左上角缩放图像 [英] CSS: How to scale an image from the center instead of top-left

问题描述

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

  max-width：100％ 
  

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

目前;

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

解决方案

只需将 width：400px; 替换为 c> > / CSS / transform> p>



  img {width：100％; max-width：100％;} div {position：absolute;左：20％; top：20％; width：250px; transition：all 2s ease-in-out;} div：hover {transform：scale（2,2）}  

 < div> < a href =http://photobucket.com/images/cattarget =_ blank> < img src =http://i583.photobucket.com/albums/ss278/campipr/coolcat.gifborder =0alt =cat photo：cat coolcat.gif/> < / a>< / div>  

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/

解决方案

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>

这篇关于CSS：如何从中心而不是左上角缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！