[轉]ionic或者angularjs中圖片顯示壓縮問題解決 or 顯示較大圖片的某一塊區域、裁剪顯示
阿新 • • 發佈:2017-08-01
嚴重 cover width 調整 解決 csdn target lan 壓縮
我們知道在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 顯示較大圖片的某一塊區域、裁剪顯示