我學習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>