Question

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

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

Answer 1

用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的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

Answer 2

可以使用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是不支持的。

Answer 3

我目前想到的要实现图片中心放大有两种办法，而且考虑到人性化放大或缩小必须使用过渡效果，不然会很难看
（1）使用css3的 transform:scale(x,y)和transition,缺点是不兼容IE6-IE8，有失真，针对一些其它版本的浏览器需要加私有属性前缀
（2）js实现，缺点:需要写较复杂的代码，需要一定的js水准，但是兼容性好，低版本ie性能问题可以再优化（推荐）

Answer 4

很简单，你已经写了position:absolute，但是却没规定位置，只需要加一个top和left属性即可。
要中心的话，这样写
top:-10px;
left:-20px;

Answer 5

大概就这样