html里的img 在小程序里是image
小程序里的图片默认是有宽高的 为了看的仔细 设置了黑色边框
<image></image>
<image src="/images/1.jpg"></image>
默认图片是有被压缩变矮的 所以这里就用到了image的mode属性
mode值
- scaleToFill (默认值) 缩放模式 不保持纵横比缩放图片 使图片的宽高完全拉伸至填满image元素
- aspectFit 缩放模式 保持纵横比缩放图片 使图片能完全显示出来 但是会有空白缝隙
- aspecFill 缩放模式 保持纵横比图片 只保证图片的短边显示出来 也就是说 会有另一个方向将发生截取
- widthFix 缩放模式 宽度不变 高度自动变化 保持原图宽高比不变
- heightFix 缩放模式 高度不变 高度自动变化 保持原图宽高比不变
<image src="/images/1.jpg" mode="widthFix"></image>版权声明：本文为weixin_57607714原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。