[转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示

咱们知道在html中显示图片通常都是用img控件标签，固然调整大小的也很容易。

可是会出现，特定的img大小，显示一张比较大尺寸的且长宽比例与特定img大小不相符的图片。而致使压缩问题，图片挤压的很严重，看起来很不舒服。

这时候能够用css中background-image这个属性来解决。用div标签代替img标签，而后设置div的背景图片。

由于background-image有不少个属性能够配套使用，因此通常很容易知足需求,好比background-size、background-position等等。

在ionic或AngularJS中，为了方便很容易将其自定义成为指令，也就是directive

示例以下：

 

.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover',
                'background-position' : 'center'
            });
        });
    };
})

而后这样使用：

<div class="back-img" back-img="{{info.picture_url}}" style="height:50px;width:50px;" ></div>转自：http://blog.csdn.net/wy250864144/article/details/54586010