我学习web前端开发时发现图片的缩放不需要用JS来实现,用CSS就可以实现了,主要原理是使用box-sizing和border来实现。
代码如下:
<!doctype html>
<html>
<head>
<style type="text/css">
a{
background:url(../images/产品1.jpg) no-repeat
box-sizing:border-box;/*为兼容不同浏览器可加相应前缀*/
border:5px solid transparent;
display:block;
width:205px;
height:205px;
}
a:hover{
border:0;
}
</style>
</head>
<body>
<a href="#"></div>
</body>
</html>