image标签图片变形

官方提供了自己的方法,只需要给image标签添加mode属性即可,在对应上对应的参数即可完美解决。

语法
复制代码
<image src="http://cdn.duanqinghua.com/duanqinghua/img/65.jpg" mode="aspectFill"></image>
mode的合法值
说明
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
top 裁剪模式,不缩放图片,只显示图片的顶部区域
bottom 裁剪模式,不缩放图片,只显示图片的底部区域
center 裁剪模式,不缩放图片,只显示图片的中间区域
left 裁剪模式,不缩放图片,只显示图片的左边区域
right 裁剪模式,不缩放图片,只显示图片的右边区域
top left 裁剪模式,不缩放图片,只显示图片的左上边区域
top right 裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
Bug & Tip

tip:image组件默认宽度320px、高度240px

tip:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

image | 微信开放文档

相关推荐
2501_93104808几秒前
HTML `<select>` 标签深度解析
前端·html
xcLeigh3 分钟前
AI 绘制图表专栏:用豆包轻松实现 HTML 柱状图、折线图与饼图
前端·人工智能·html·折线图·柱状图·图表·豆包
码代码的霖4 分钟前
HTML———标签元素
前端·html
鲸落✗7 分钟前
深入解析单HTML实现的网页版《我的世界》(附代码下载链接)
前端·python·html
Aerelin10 分钟前
豆瓣数据采集案例
前端·爬虫·python·js·playwright
扑棱蛾子11 分钟前
unipush推送入门:10分钟搞定UniPush在线消息集成
前端
b***653220 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
济南壹软网络科技有限公司23 分钟前
沉浸式体验革命:壹软科技2025新版盲盒源码前端3D渲染与个性化运营技术解析
前端·科技·uni-app·开源·php·盲盒源码
陈随易24 分钟前
MoonBit语法基础概述
前端·后端·程序员
v***431725 分钟前
springboot3整合knife4j详细版,包会!(不带swagger2玩)
android·前端·后端