当前位置: 首页 > 面试题库 >

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

颜楚青
2023-03-14
问题内容

所以我的问题是我有一个图片,并将其CSS设置为

max-width: 100%

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

目前; 从我在大多数涉及规模的过渡中所见,它们从左上角开始扩展。


问题答案:

只需替换width: 400px;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>


 类似资料:
  • 我想在我的Android应用程序中增加位图的大小。 基本上,我想创建一个新的位图,其宽度与原始位图相同,但高度更大。(新)额外像素的背景可以是黑色、白色或透明。 我该怎么做?

  • 问题内容: 我正在尝试使用AffineTransform从其中心缩放矩形。我敢肯定解决方案是显而易见的,但我无法使它起作用!到目前为止,这是我测试过的… 但这是行不通的。 问题答案: 当您处理矩形时,我明白了您的意思。原因是因为转换的初始计算未考虑容器对象的大小。 使用此代替: 这样做是在将矩形缩放之前将其平移到面板的中心。在我的测试中,它工作正常。

  • 以下是CardView的XML代码: 我尝试对ImageView(和LinearLayout)的属性使用wrap_content,并尝试包含属性android: caleType="fitXY",但它没有帮助,似乎没有任何效果。 谁能帮我一下吗?我非常感谢您的每一句评论,也非常感谢您的帮助。

  • 我尝试用FFmpeg执行一个基本的缩放。我有一个输入图像(. png 1280x720)和我创建一个8秒的视频(. mp4 320x180)从它,与缩放。这是我的命令: ffmpeg-loop 1-i in_img。png-c:v libx264-pix_fmt yuv420p-strict-experimental-framerate 25-vf zoompan=z='min(缩放0.01183

  • 问题内容: 我发现某些jQuery插件在其css规则中使用“ zoom”描述符,我什至查看w3c网站,也发现它用于放大,但是我实际上如何实现呢?还是我必须定义一些视口?以及如何定义这样的视口?还是我对整个事情都错了? 有可能像这样使用它吗 问题答案: CSS规范中未包含缩放功能,但IE,Safari4,Chrome支持缩放功能(从3.5开始,您可以在Firefox中获得类似的效果)。 因此,所有浏

  • 问题内容: 我不确定这是否可行,但是我认为使用CSS转换创建一个效果是很酷的,其中div从其中心扩展到预定的高度和宽度,而不仅仅是从左上角扩展。 例如,如果我有demo 和(为简洁起见,省略了供应商前缀) 悬停时,这会将方块向右扩展并向下扩展至100px。 我希望它从中间扩展。 我知道我可能会使用demo,但这并不能真正为我提供非常“像素完美”的布局(因为它基于百分比),并且也不会影响周围的布局(