1.背景图片放大
使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放大效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <style> .box{ border: 5px solid black; width: 400px; height: 400px; margin: 100px auto; background-image: url(./1.png); /* 设置背景大小为100% */ background-size: 100%; /* 设置背景图片位置 */ background-position: 50% 50%; /* 添加过渡效果 */ transition: all 1s; } .box:hover{ /* 鼠标悬停时放大 */ background-size: 120%; } </style> </head> <body> <div class="box"></div> </body> </html> |
2.img图片放大
在div中添加img元素，给div添加弹性布局保证图片始终位于居中位置，当鼠标悬停于img时修改图片大小。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <style> .box { border: 5px solid black; width: 400px; height: 400px; margin: 100px auto; /* 设置溢出隐藏 */ overflow: hidden; /* 使用弹性布局保证图片居中 */ display: flex; justify-content: center; align-items: center; } .box img { /* 设置大小 */ width: 100%; height: 100%; /* 给图片添加过渡效果 */ transition: all 1s; } .box img:hover { /* 鼠标悬停放大 */ width: 120%; height: 120%; } </style> </head> <body> <div class="box"> <img src="./1.png" alt=""> </div> </body> </html> |
3.使用transform: scale(1)
使用这一方法与img放大类似，不过好处是不用手动设置图片居中，transform: scale(1);会在原位置上放大。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <style> .box { border: 5px solid black; width: 400px; height: 400px; margin: 100px auto; /* 设置溢出隐藏 */ overflow: hidden; } .box img { width: 100%; height: 100%; /* 设置放大比例 */ transform: scale(1); /* 给图片添加过渡效果 */ transition: all 1s; } .box img:hover { /* 修改放大比例 */ transform: scale(1.2); } </style> </head> <body> <div class="box"> <img src="./1.png" alt=""> </div> </body> </html> |
