用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大

a:hoverimg{width:400px;height:200px;position:absolute;z-index:5;}<ahref="#"><imgwidth... a:hover img
{
width:400px; height:200px;
position:absolute;
z-index:5;}
<a href="#"><img width=40 height=20 src=" "/></a>
或者说说怎么调整图片放大以后的位置也行
没财富值了 希望会的给我讲讲 急用啊
展开
 我来答
大野瘦子
高粉答主

2019-07-16 · 繁杂信息太多,你要学会辨别
知道小有建树答主
回答量:1227
采纳率:100%
帮助的人:32.7万
展开全部

用CSS3中的transfrom:scale{x,y}来放大,如下:

<style>

*{margin:0;padding:0;}

div{border:solid 1px #333;width:40px;height:40px;}

div img{width:40px;height:40px;transition:all 0.3s;}

div img:hover{transfrom:scale{2,2};}//从中心放大两部

</style>

<div><img src="图片地址" alt=""/></div>

扩展资料:

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量);

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

jack观天下
推荐于2017-09-16 · 带你看天下趣闻,有意思的视频!
jack观天下
采纳数:832 获赞数:3143

向TA提问 私信TA
展开全部

可以使用CSS3中的transfrom:scale{x,y}来放大,示例代码如下:

<style>
*{margin:0;padding:0;}
div{border:solid 1px #333;width:40px;height:40px;}
div img{width:40px;height:40px;transition:all 0.3s;}
div img:hover{transfrom:scale{2,2};}//从中心放大两部
</style>
<div><img src="图片地址" alt=""/></div>

CSS3是最新的CSS版本,现代浏览器都支持CSS的大部分属性,在IE中Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。IE6-8是不支持的。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友a2a5975
2015-01-29 · TA获得超过394个赞
知道小有建树答主
回答量:335
采纳率:50%
帮助的人:169万
展开全部
我目前想到的要实现图片中心放大有两种办法,而且考虑到人性化放大或缩小必须使用过渡效果,不然会很难看
(1)使用css3的 transform:scale(x,y)和transition,缺点是不兼容IE6-IE8,有失真,针对一些其它版本的浏览器需要加私有属性前缀
(2)js实现,缺点:需要写较复杂的代码,需要一定的js水准,但是兼容性好,低版本ie性能问题可以再优化(推荐)
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
野渡孤苇
2015-01-29 · TA获得超过817个赞
知道小有建树答主
回答量:951
采纳率:54%
帮助的人:488万
展开全部
很简单,你已经写了position:absolute,但是却没规定位置,只需要加一个top和left属性即可。
要中心的话,这样写
top:-10px;
left:-20px;
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2018-03-09
展开全部

大概就这样

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式