css3点击图片放大 |css px与em

//添加一些基本的样式
img{
transition: all 0.3s ease-out;
max-width: 100%;
}
//当鼠标悬停在图片上时执行
img:hover{
transform: scale(1.2);
}
//当点击图片时执行
img:active{
transform: scale(1.4);
}

在上面的代码中，大家首先给所有的图片添加了一个过渡效果和一个最大宽度。当鼠标悬停在图片上时，图片将会放大到原来的1.2倍，当大家点击图片时，图片会放大到原来的1.4倍。

这里有一些需要注意的事项。首先，你必须保证图片本身的大小足够大，否则你可能会看到一些像素化的效果。其次，在实现这个效果的过程中，大家使用了CSS3的transform属性。由于这个新的属性并没有被所有的浏览器都支持，所以大家需要在代码中添加一些前缀。

img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
img:active{
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
transform: scale(1.4);
}

在上面的代码中，大家添加了webkit和moz前缀。这将确保大家的代码能够在大多数现代浏览器中正常运行。

最后，这只是实现图片放大效果的一种方式。你可以根据你的需求来更改过渡效果和放大倍数。希望这篇文章能够对你有所帮助。