兩種方式實作圖檔按比例響應式縮放、并自動裁剪的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，不能做懶加載處理