1.首先我们先来看一下最终实现的效果： ? 2. 刚开始的时候我并没有实现这个效果，遇到的问题就是 鼠标经过图片时，图片可以放大，但是图片会超出父盒子，不是在父盒子里面进行的放大，效果图如下： ????????????????????????????????? ?3.这个问题如何解决呢，其实很简单 只需要在这个图片的父元素里添加 overflow：hidden;这个隐藏属性就ok了，这样当你图片发大时超出父盒子的部分会被隐藏掉，代码如下： <style> body { background-color: pink; } div { overflow: hidden; width: 180px; height: 130px; margin: 50px auto; border: 2px solid red; } img:hover { animation: move .5s linear forwards; } @keyframes move { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } </style> </head> <body> <div> <img src="../image/picture.jpg" alt="" width="180px" height="130px"> </div> </body> ??最后总结一下:实现鼠标经过图片 图片放大且不超出父盒子的解决方法就是： 在父元素里添加overflow：hidden属性。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #html5鼠标经过图片放大 #只需要在这个图片
