图片在区域内的显示方法:占满

2015-05-19 15:03

图片在区域内的显示方法:占满

目的

软件界面中经常需要在某个区域内显示一张图片。

但是实际设计开发的时候,图片大小千变万化,区域大小未必和图片大小一致,甚至宽高比也不相同,这种情况下,需要以一种比较规范的方式来对图片的显示方式(大小缩放,在区域中的位置)做出规定。

原则

图片不管如何缩小放大,宽高比例永远不能变,否则会很难看;

最终显示时,图片应该占满显示区域,不留白;

图片的中心点永远和显示区域的中心点对齐;

实现方法

(不考虑实现场合,具体到 Android,javascript 等语言中,可能实现起来并没有以下说的这么复杂)

假设某图片原始宽高为 iW, iH

显示区域宽高为 cW, cH

如果图片高度不等于显示区域高度(iH <> cH),则等比例计算图片尺寸,使得其高度等于显示区域高度;否则不改变宽高。

计算完后,图片尺寸为 iW1, iH1

之后,看图片此时的宽度是否小于显示区域宽度(iW1 < cW),如果小于,则等比例计算图片尺寸,使得其宽度等于显示区域宽度;否则不改变宽高。

计算完后,图片尺寸为 iW2, iH2

之后,将图片大小调整为 iW2 x iH2 ,并使其居中显示在显示区域里。

效果说明

image