定義好樣式class
使用一個塊元素(例如div),添加class scale-img到其中,包裹着img
.scale-img{overflow: hidden;}
.scale-img img{
width: 100%;
height: 100%;
-webkit-object-fit: cover;
object-fit: cover;
transition: .5s all linear;
-ms-transition: .5s all linear; /* IE 9 */
-moz-transition: .5s all linear; /* Firefox */
-webkit-transition: .5s all linear; /* Safari 和 Chrome */
-o-transition: .5s all linear; /* Opera */
}
.scale-img:hover img{
transform: scale3d(1.1,1.1,1.1);
-ms-transform: scale3d(1.1,1.1,1.1);
-moz-transform: scale3d(1.1,1.1,1.1);
-webkit-transform: scale3d(1.1,1.1,1.1);
-o-transform: scale3d(1.1,1.1,1.1);
}
當你想實現圖片img鼠標移入放大,直接在img的父親dom的class加上scale-img即可