多列列表控件中图片尺寸处理的若干问题
来源:互联网 发布:java public和private 编辑:程序博客网 时间:2024/05/22 02:03
一、自适应
当前终端设备种类繁多,即单以 iOS 设备论计,从 iPhone 3GS 到 iPhone 6 Plus 总的数量亦不少了。如果对图片的什么尺寸都不指定(默认),或者只确定一种尺寸(也就是写死了),那么可以想象,小的图片在屏幕小的手机显示刚刚好,不过在屏幕大的手机中就显得很小;如果把图片调大尺寸,虽然屏幕大的手机显示刚刚好,但屏幕小的手机就不能完全展示了。总之,这个问题就是,五花八门的屏幕尺寸怎么让图片好去适应?
解决的办法也比较简单,也就是:
采用百分比单位设置图片
这便是所谓的“自适应设计”——让浏览器获取父容器尺寸再按照比例去拉伸图片。自适应设计中,宽度都是按照百分比单位来进行设置的,这是一般推荐的方法,适应性更好。不仅仅图片,实际上文字、按钮都可采用自适应设计。
二、比例
对于图片尺寸大小,也就是 <img src=”aaa.jpg” / > 元素,浏览器有个不成文的约定,就是指定了宽度,不指定高度的话,那么高度就是按照图片的比例计算出来,反之亦然(即指定了高度,自动计算出宽度)——无论单位是绝对值的 px 还是自适应的 % 都是如此。简单的运算公式如下:
height = width / (4/3)width = height * (4/3)
其中,4/3 是比例,即比例系数 4 /3 = 1.33~。我们约定 4/3 的比例为横图比例, 8 /9 为竖图比例(当然,此处的 4/3 是推荐值。不过也应该尽快确定好,因为图片一旦选定好了比例裁剪,再修改的话则比较麻烦,而且数量上是大批量的。)。
明显,这样的好处是还原了图片的真实比例,不会使正常比例的图片产生不期望的变型。由此,也确定了我们展示图片的第二个原则:
不要使图片变型
前面说到,图片高度的是不确定的。因为每张图片如果比例不一,那么尽管指定了其宽度,最近得出的高度也是五花八门的。为了统一高度展示,我们应明确图片的比例,例如上述的横图为 4/3、竖图为 8/9 ——也只允许出现这限定几种的比例,那么图片在前端展示的时候,高度也就能确定,不会突然冒出一截或者缩进去一截;同时图片也不会破坏比例(无论图片原图多大)、失真。于是我们归纳第三个原则:
明确几种可用的图片比例
所有的图片都应该在可提供的几种比例中选择,不应有“奇怪”比例的图片,否则单个看起来没什么问题,但放进控件容器中就出问题。
三、求高度算法
在上述原则指导下,我们拟定一套算法,求出图片实际高度。
var screenWidth = getScreenWidth(); // 获取视口宽度var cellWidth; // 单元格宽度var columns = 3; // 列数,可双列或三列(取值:2|3),假设三列// 求单元格实际宽度cellWidth = scrennWidth * ( 1/ columns ); // 实际宽度var cellHight = cellWidth / (4/3); // 实际高度。此为横图,竖图为 8/9上述算法只是求高度,如果宽度已经设置了百分比,那么不一定需要设置图片 px 宽度。程序实现中,单纯求高度并不复杂。如果考虑 window.resize 事件,动态改变视口尺寸的话(手机中,便是 横屏、竖屏的问题),高度应该随着视口大小变化而变化——那么那将是该算法的难点。
- 多列列表控件中图片尺寸处理的若干问题
- iOS应用中图片尺寸的处理
- 列表控件的列排序
- 自然语言处理的若干问题
- c#中使用多线程访问winform中控件的若干问题
- c#中使用多线程访问winform中控件的若干问题
- c#中使用多线程访问winform中控件的若干问题
- c#中使用多线程访问 winform中控件的若干问题
- c#中使用多线程访问winform中控件的若干问题
- C#中使用多线程访问Winform中控件的若干问题
- c#中线程访问winform控件的若干问题
- 转:c#中线程访问winform控件的若干问题
- c#中多线程访问winform控件的若干问题
- c#中多线程访问winform控件的若干问题
- c#中多线程访问winform控件的若干问题
- c#中线程访问winform控件的若干问题
- c#中多线程访问winform控件的若干问题
- VB.Net自己写的一个控件:ComboBox下拉列表中显示多列数据(可以绑定数据表)
- CUDA-事件计时
- solr4.9 运行
- iOS:UIPopoverController示例
- UITextField小结
- Android 友盟分享,让你后顾无忧,麻麻再也不用担心我的学习。
- 多列列表控件中图片尺寸处理的若干问题
- hdu 4778 Gems Fight!(状态压缩+博弈+记忆化)
- 《精通Linux设备驱动程序开发》——字符设备驱动程序
- oracle时间操作。
- C,C++,C#三者区别
- postgresql 的一些常用命令
- TADOQuery插入大数据量的记录效率较高的方法
- boost enable_shared_form_this范例
- HDU 1237 简单计算器