[转]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
[转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示的更多相关文章
- 图片_ _Android有效解决加载大图片时内存溢出的问题 2
Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...
- phpPHP创建创建jpg格式图片以及压缩图片(转)
其实是因为一些业务上的需求,所以需要对用户上传后的图片进行压缩,因为上传的图片比较大,显示的时候加载起来如果网速不给力的话就很吃力了,而且大图片也浪费空间,于是找了一下相关的资源,主要方法在开源中国上 ...
- AngularJS中实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...
- 关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)
具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...
- 如何使用Android MediaStore裁剪大图片
译者按:在外企工作的半年多中花了不少时间在国外的网站上搜寻资料,其中有一些相当有含金量的文章,我会陆陆续续翻译成中文,与大家共享之.初次翻译,“信达雅”三境界恐怕只到信的层次,望大家见谅! 这篇文章相 ...
- 以最省内存的方式把大图片加载到内存及获取Exif信息和获取屏幕高度和宽度的新方法
我们在加载图片时经常会遇到内存溢出的问题,图片太大,我们加载图片时,一般都是用的如下一般方法(加载本地图片): /** * 不作处理,去加载图片的方法,碰到比较大的图片会内存溢出 */ private ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- Android中处理大图片时图片压缩
1.BitmapFactory.Options中的属性 在进行图片压缩时,是通过设置BitmapFactory.Options的一些值来改变图片的属性的,下面我们来看看BitmapFactory.Op ...
- angularjs中只显示选中的radio的值
angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...
随机推荐
- DFS Gym 100553J Jokewithpermutation
题目传送门 /* 题意:将字符串分割成一个全排列 DFS:搜索主要在一位数和两位数的处理,用d1, d2记录个数,在不饱和的情况下,两种都试一下 DFS还是写不来,难道是在家里懒? */ #inclu ...
- Use Power bi Mobile Show SSRS 2016 Mobile Report;使用 Power BI Mobile 查阅ssrs2016 mobile report
使用 power bi mobile 查阅 ssrs 2016 mobile report 很简单,以下是IOS客户端的演示. 系统自带了演示数据,包含power bi 的和 ssrs mobile ...
- Android偏好设置(1)概述和Preferences简介
1.Overview Instead of using View objects to build the user interface, settings are built using vario ...
- 【小程序】基于.NET CORE2.1 的 微信开放平台 第三方平台开发 教程一 准备工作
微信第三方平台概述 公众平台第三方平台是为了让公众号或小程序运营者,在面向垂直行业需求时,可以一键授权给第三方平台(并且可以同时授权给多家第三方),通过第三方平台来完成业务,开放给所有通过开发者资质认 ...
- 3、InputStream
package com.io.file; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoun ...
- 图形化unix/linux 工具 mobarxterm
1.使用 mobarxterm 图形化登录工具 2. 如果服务器是图形化界面启动的,xhost +命令可以不用执行 [root@test ~]# xhost +xhost: unable to o ...
- 使用 Suricata 进行入侵监控(一个简单小例子访问百度)
前期博客 基于CentOS6.5下Suricata(一款高性能的网络IDS.IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐) 1.自己编写一条规则,规则书写参考snort规则(suricata ...
- Partial(部分方法,局部方法),virtual(虚方法),abstract(抽象方法)
Partial 部分方法顾明思议是方法的一部分,不完整的,在ide编译时候,会将所有部分方法加载到一起统一编译,如果分部方法没有被实现,编译器就不会.对他们进行编译. 局部类型的限制 (1) 局部类型 ...
- 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密,.NET Core使用私钥解密;
有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...
- informix数据库的日志
看到一句sql,没见过: CREATE TABLE aaad ( chianm ), course ), score INTEGER ) IN adbs EXTENT SIZE LOCK MODE R ...