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

一、自适应

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