AspectFill VS. AspectFit
从去年10月进入公司,到现在差不多忙碌了3个月,期间几乎所有精力和时间都花在了公司的项目上,有很多工作学习的心得一直没有总结,趁周末无事就来使这写一写。
除了刚进公司的那一个月是做一些修修补补的工作,后面的时间直接就在项目里大刀阔斧的搞改造,大概用了不到一个月的时间完成一个新的核心功能,当然是多亏了安卓版的前车之鉴,进度来的比较快,那段时间总体来说就是跟CoreGrahics 打交道,玩弄动画和affineTransform ,然后就是移植opencv的代码,很无脑的移植而已。这里唯一值得一提的是搞清楚了 AspectFill 和 AspectFit 是怎么回事。
AspectFill VS. AspectFit
如果跟图片打过交道,这两个概念几乎是最常见的,其实也不仅限于图片,这个概念涉及到所有内容和容器的关系。通常,如果我们要把一个固定大小的内容,比如图片放到一个固定大小的容器里,但是这个容器的宽高比例和图片的不一样的时候,我们不能简单粗暴的直接把图片的宽高设置成和容器的一样,这样图片会被挤压而失真。所以就需要按比例来缩放图片,使其既保证真实的比例,又能塞进给定的容器。但是如何缩放就是个问题:
- 容器和图片的比例一样,这个好办,只需要按照比例缩放就行了,比如缩小3倍,newWidth = width / 3; newHeight = height /3
- 容器和图片比例不一样,问题来了。
假设容器宽和高分别是H, W;图片宽高分别是h, w。图片和容器比例不一样可能带来这个问题 h / H = 3; w / W = 2。因为要按比例,所以我们只能从缩小3倍和缩小2倍中选一个来缩放。
如果我们选择缩3 倍,那么新图片的高度刚好和容器契合,但是宽度本来只需缩小2倍就够了,但是我们缩了3倍,于是新图片在容器里的宽度就不能填满而出现了留白,这样的缩放方式就是AspectFit 因为他取了最大的缩放值从而保证整张图片都能完整的放进容器(这就是Fit),代价是不能充满容器。
对于AspectFill 当然就是与Fit 相反,其目的是“Fill” 即保证充满容器。所以选择两个缩放值中较小的那个,接上例,因为选择缩小2倍,所以宽度刚好契合容器,但是高度因为只缩了2倍所以导致一部分图片内容被截在了容器外面。
Conclusion
AspectFill 用途:保证图片充满整个容器,方式:选取宽高缩放值里较小的值来缩放,代价:一部分图片内容被截断。
AspectFit 用途:保证图片完整地装进容器,方式:选取宽高缩放值里较大的值来缩放,代价:容器无法装满,出现留白。
To Be Continued....
AspectFill VS. AspectFit的更多相关文章
- ios基础知识
1获取系统语言设置 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; NSArray *languages = ...
- iOS 基础知识
1获取系统语言设置 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; NSArray *languages = ...
- 微信小程序image组件中aspectFill和widthfix模式应用详解
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来.也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发 ...
- 浅谈H5图片中object-fit的属性及含义/ 小程序image mode属性中scaleToFill,aspectFit,widthFix等类似
我们在H5中对于图片的属性包含如下: object-fit属性有哪些值呢? object-fit: fill; object-fit: contain; object-fit: cover; o ...
- iOS 底层框架的浅析
1.简介 IOS是由苹果公司为iPhone.iPod touch和iPad等设备开发的操作系统. 2.知识点 iPhone OS(现在叫iOS)是iPhone, iPod touch 和 iPad 设 ...
- 微信小程序-媒体组件
audio 音频. MediaError.code 示例代码: <!-- audio.wxml --> <audio poster="{{poster}}" na ...
- iOS开发拓展篇—音频处理(音乐播放器6)
iOS开发拓展篇—音频处理(音乐播放器6) 一.图片处理 说明: Aspect表示按照原来的宽高比进行缩放. Aspectfit表示按照原来的宽高比缩放,要求看到全部图片,后果是不能完全覆盖窗口,会留 ...
- iOS - MPMoviePlayer 视频播放
前言 MP_EXTERN_CLASS_AVAILABLE(3_2) NS_DEPRECATED_IOS(3_2, 9_0, "Use AVPlayerViewController in AV ...
- 微信小程序初体验(上)
版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...
随机推荐
- BZOJ 1057: [ZJOI2007]棋盘制作
Decsription 给你一个矩阵,求最大了 01相间 的矩阵. Sol DP+悬线法. 这是一个论文啊 <浅谈用极大化思想解决最大子矩形问题>--王知昆. 枚举每一根悬线,记录最左/右 ...
- echarts之字符云tooltip显示混乱问题的解决办法
echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...
- centos终端中mysql中文显示乱码的处理
http://stackoverflow.com/questions/3513773/change-mysql-default-character-set-to-utf-8-in-my-cnfhttp ...
- VQuery选择器
VQUery elements属性,储存选中的元素 参数 typeof的作用 字符串 class ID tagName 函数 事件绑定 对象 直接插入 $函数 绑定事件 click方法 显示隐藏,- ...
- ASIO插件 真的能提升 音质?(听音乐者必看)
最近在倒弄HIFI音乐播放器footbar2000的配置时,发现了2011年的一个神贴, 最牛逼的是,这个神贴到现在还屹立不倒,还有很多无知的人在下面膜拜, 我真的想问:你这么优秀,都能逆天反转音质, ...
- MySQL 5.6 Threadpool(优先队列)介绍及性能测试【转】
本文来自:http://www.gpfeng.com/?p=540&utm_source=tuicool&utm_medium=referral 背景介绍 MySQL常用(目前线上使用 ...
- MongoDB 3.0 用户创建
摘要: MongoDB 3.0 安全权限访问控制,在添加用户上面3.0版本和之前的版本有很大的区别,这里就说明下3.0的添加用户的方法. 环境.测试: 在安装MongoDB之后,先关闭auth认证,进 ...
- 内存管理_JAVA内存管理
Java虚拟机规范中试图定义一种Java内存模型(Java Memory Model,JMM)来屏蔽各个硬件平台和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一致的内存访问效果.那 ...
- nyoj_148_fibonacci数列(二)_矩阵快速幂
fibonacci数列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 In the Fibonacci integer sequence, F0 = 0, F ...
- [Android] Android5.1系统自带的应用启动次数统计
reference to : http://blog.csdn.net/elder_sword/article/details/50508257 前段时间要做一个统计手机中激活量的东东,这个统计不是单 ...