多列清單控件中圖檔尺寸處理的若幹問題

目前終端裝置種類繁多，即單以 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 ——也隻允許出現這限定幾種的比例，那麼圖檔在前端展示的時候，高度也就能确定，不會突然冒出一截或者縮進去一截；同時圖檔也不會破壞比例（無論圖檔原圖多大）、失真。于是我們歸納第三個原則：

                明确幾種可用的圖檔比例

所有的圖檔都應該在可提供的幾種比例中選擇，不應有“奇怪”比例的圖檔，否則單個看起來沒什麼問題，但放進控件容器中就出問題。

在上述原則指導下，我們拟定一套算法，求出圖檔實際高度。

例如，上圖是圖檔三列清單，于是計算高度的方法如下：

上述算法隻是求高度，如果寬度已經設定了百分比，那麼不一定需要設定圖檔 px 寬度。程式實作中，單純求高度并不複雜。如果考慮 window.resize 事件，動态改變視口尺寸的話（手機中，便是 橫屏、豎屏的問題），高度應該随着視口大小變化而變化——那麼那将是該算法的難點。