[转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示
2024-09-30 17:45:13
我们知道在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
最新文章
- u盘安装windows系统
- Tomcat启动过程中找不到JAVA_HOME解决方法
- [刘阳Java]_Java技术有哪些学习重点_第1讲
- Java方法的封装
- jQuery/javascript实现简单网页计算器
- java web开发问题集合
- TYVJ P1053 字符串的展开 Label:字符 水
- NSKeyValueObserving(KVO)
- JAVA学习路线图---(JAVA1234)
- Config the Android 5.0 Build Environment
- Linux Shell编程(11)——退出和退出状态
- MySQL聚簇索引
- ubuntu搭建JavaEE环境
- 【转】【JAVA资料免费下载】158个JAVA免豆精品资料汇总——下载目录
- 【UVA】11400 照明系统设计 排序+dp
- tensorflow(4):神经网络框架总结
- Pilosa文档翻译(二)入门指南
- 【Python基础】zip函数的使用
- CF1097F Alex and a TV Show 莫比乌斯反演、bitset
- Array and Colon in Matlab