CSS3图片以中心缩放，放大超出隐藏实现

wfaceboss

发布于 2019-04-08 10:49:09

2.6K0

文章被收录于专栏：wfacebosswfaceboss

首页，重点是有一个包裹img标签的容器，这里我们给该容器设置一个class为selfScale

 <div class="selfScale">
    <img sr="#" />
  </div>

接下来，给样式

.selfScale{//容器
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.selfScale img{//容器中东西
  width: 100%;
  top: 0;
  position: relative;
  left: 0;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  transition: transform 0.3s;
}
.selfScale img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

这样就可以实现在指定容器中缩放图片了。

效果图的变化如下：

默认情况下的图片：