微信小程序的组件和普通的 HTML 有所不同,比如 HTML 的 div
在小程序里面是 view
,HTML 的 span
在小程序里是 text
。
因为 uni-app 要兼容多终端和各种小程序,所以它的语法和微信小程序是基本一致的。
今天就整理一下小程序的图片组件(image)的缩放和裁切显示实现,下面以 uni-app 为例。
如果在页面中增加一个 <image />
标签,不设置任何样式的话,它会占据很大一块空间。查看 uni-app 源码可以发现,图片组件有一个 320px
的宽度和 240px
的高度。
/* CSS */ uni-image { width: 320px; height: 240px; display: inline-block; overflow: hidden; position: relative }
这样,如果只给图片设置宽度或者高度的话,会导致图片被拉伸。
一般给 image
设置大小的时候要同时指定宽度和高度:
/* CSS */ .image { width: 150px; height: 150px; }
如果图片的长度和宽度不固定,可以设定宽度(或高度),然后高度(或宽度)自适应:
/* CSS */ .image { width: 150px; height: auto; }
但如果一个列表中的图片大小不一,就比较麻烦。不过不用担心,微信小程序为 image
组件提供了一个 mode
属性。
mode
属性不仅可以让图片等比例缩放,还可以自动裁切,按照意愿进行显示。
比如等比例显示,我们可以给图片设置一个宽度,然后设置 mode="widthFix"
,这样图片也不会被拉伸:
<!-- HTML --> <image class="image" mode="widthFix" /> /* CSS */ .image { width: 150px; }
比如用户头像,图片的宽高是固定的,图片如果比较长,可以使用 mode="aspectFill"
等比例缩放,自动裁剪短边填充:
<!-- HTML --> <image class="image" mode="aspectFill" /> /* CSS */ .image { width: 150px; height: 150px; }
这样即可以按照尺寸显示图片,又不会被拉伸了。
image
组件的 mode
属性还有很多参数,使用起来非常灵活:
scaleToFill
缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image
元素。
aspectFit
缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill
缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix
缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。
heightFix
缩放模式,高度不变,宽度自动变化,保持原图宽高比不变。
top
裁剪模式,不缩放图片,只显示图片的顶部区域。
bottom
裁剪模式,不缩放图片,只显示图片的底部区域。
center
裁剪模式,不缩放图片,只显示图片的中间区域。
left
裁剪模式,不缩放图片,只显示图片的左边区域。
right
裁剪模式,不缩放图片,只显示图片的右边区域。
top left
裁剪模式,不缩放图片,只显示图片的左上边区域。
top right
裁剪模式,不缩放图片,只显示图片的右上边区域。
bottom left
裁剪模式,不缩放图片,只显示图片的左下边区域。
bottom right
裁剪模式,不缩放图片,只显示图片的右下边区域。