小程序里img那些隐藏的坑

138 阅读1分钟

有这么一个需求,图片宽高固定,切掉溢出的高度。

父级view宽高固定,子级image固定宽度。

发现图片的高莫名被拉伸,百思不得其解的时候突然发现

image.png

image是有默认属性的,之前只知道有默认inline-block,才发现还有默认宽高,不设置高度。默认就会是这个240px。再次询问度娘后发现。

给image加一个属性 mode="",可选值如下

aspectFit:保持原图宽高比缩放图片,使图片的长边能完全显示出来。

aspectFill:保持原图宽高比缩放图片,使图片的短边能完全显示出来。

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。

heightFix:高度不变,宽度自动变化,保持原图宽高比不变。

top:不缩放图片,只显示图片的顶部区域。

bottom:不缩放图片,只显示图片的底部区域。

center:不缩放图片,只显示图片的中间区域。

stretch:不缩放图片,并且会拉伸图片的宽度或高度到完全显示。

scaleToFill:不缩放图片,以图片的原始尺寸去覆盖容器。