圖片響應式縮放，已中心為原點裁剪

安靜點發表於2018-11-01

1、圖片以背景圖顯示：

<div class="bg-img" style="background-image:url(images/test.jpg)"></div>
複製程式碼

2、css 部分


.bg-img{

  position: relative;

  width: 100%;

  height:0;

  padding-bottom: 100%;

  background-position: center center;

  background-repeat: no-repeat;

  -webkit-background-size: cover;

  -moz-background-size:cover;

  background-size: cover;

  overflow: hidden;

}
複製程式碼

*解析：padding為百分比時，是根據父元素的width 來計算的；

css3中的 background-size:cover 的特性，把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。

相關文章