使用情景：當(dāng)我們遇到需要固定大小的圖片，而又不想讓圖片變形

這個(gè)時(shí)候我要應(yīng)該要想到的是css中的background相關(guān)屬性

.backImg{
    'background-image': 'url('')',
    'background-size': 'cover',
    'background-position': 'center'
}

//background-size
把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。

這樣我們就做到了可以讓圖片局部顯示并達(dá)到了圖片沒(méi)有變形的效果

下面是AngularJs把它封裝為相應(yīng)的指令

angular.module('imgTransformModule', [])
  .directive('imgTransform', function () {
    return function (scope, element, attrs) {
      attrs.$observe('imgTransform', function (value) {
        element.css({
          'background-image': 'url(' + value + ')',
          'background-size': 'cover',
          'background-position': 'center'
          'display':'inline-block';
        });
      });
    };
  });

調(diào)用

 <div class="img-Transform" img-transform="{{url}}"></div>