两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧

两种方式各有各的优势和短板：

一：也是大家最经常用的，如下：

<div style="width: 4.0rem;background: red;">
        <img data-echo="assets/img/bmw_m1_hood.jpg" src="assets/img/grey.gif" alt="" style="width: 100%;">
</div>

这种方式优势在于：

1，可以结合flexble等手机适配框架实现手机端的适配  （width: 4.0rem;）

2，可以结合echo.js或者lazyload.js等懒加载插件

备注：懒加载时style="width: 100%;"是必须要设置的

这种方式短板也很明显：

1，高度是自适应宽度的变化的，所以不能实现等比例裁剪，比如1:1；2:3。。。。

2，如果很多同类图片同时使用，需要美工做同样尺寸的图片

二：利用css的background：url()属性，如下：

html部分：

<div style="width: 4.0rem;background: red;">
        <div class="zsimage"></div>
   </div>

css部分：

.zsimage{
  background: url(../../../assets/img/bmw_m1_hood.jpg);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size: cover;
}

备注：设置比例时直接对 width: 100%;和padding-bottom: 100%;进行设置就好，比如目前都是100%也就是1:1

           如果设置为width: 100%;padding-bottom: 50%;就是2:1

这种方式的优势在于：

1，可以在不拉伸图片的情况下，按比例裁剪图片

2，无论什么尺寸的图，不需要美工处理，可实现自行裁剪

短板也很明显：

1，不能做懒加载处理