多列列表控件中图片尺寸处理的若干问题

时间:2022-05-29 17:37:27

一、自适应

当前终端设备种类繁多,即单以 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 事件,动态改变视口尺寸的话(手机中,便是 横屏、竖屏的问题),高度应该随着视口大小变化而变化——那么那将是该算法的难点。