CSS3圖片以中心縮放，放大超出隱藏實現

首頁，重點是有一個包裹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);
}

這樣就可以實現在指定容器中縮放圖片了。

效果圖的變化如下：

默認情況下的圖片：

鼠標移入放大后的圖片：