[轉]ionic或者angularjs中圖片顯示壓縮問題解決 or 顯示較大圖片的某一塊地區、裁剪顯示

標籤：調整   val   center   image   inf   css   知識庫   img   size   

我們知道在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

[轉]ionic或者angularjs中圖片顯示壓縮問題解決 or 顯示較大圖片的某一塊地區、裁剪顯示