使用情景：当我们遇到需要固定大小的图片，而又不想让图片变形
这个时候我要应该要想到的是css中的background相关属性
.backImg{
'background-image': 'url('')',
'background-size': 'cover',
'background-position': 'center'
}
//background-size
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
这样我们就做到了可以让图片局部显示并达到了图片没有变形的效果
下面是AngularJs把它封装为相应的指令
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';
});
});
};
});
调用
<div class="img-Transform" img-transform="{{url}}"></div>