图片响应式缩放，已中心为原点裁剪

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 的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。