微信小程序——image图片组件宽高自适应方法
5星 · 超过95%的资源 71 浏览量
2021-01-03
05:48:25
上传
评论
收藏 74KB PDF 举报 
微信小程序微信小程序——image图片组件宽高自适应方法图片组件宽高自适应方法
前言：前言：
第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了
~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示
逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻，猜疑是哪
给图片默认设置了图片高度，后来使用调试器选中图片元素查看了下原因，果不其然，小程序给image组件默认设置了以下样
式：
image {
width: 320px;
height: 240px;
display: inline-block;
overflow: hidden;
}
因此导致我只给图片设置了width，但是高度还是使用了默认的240px的值，但是我又不想给图片固定高度，因为固定后，后
期如果设计突然要修改图片尺寸的话，还得修改小程序代码样式，然后再发包，这种Low的事情绝不是一个优秀与帅气并存的
前端高级开发人员做的事~（啪！谁打的），然后我就去查了下官方API，在image组件上有一个mode属性，这个属性的功能
是设置图片裁剪、缩放的模式，默认值为scaleToFill（缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满
image 元素），mode有很多可选参数，如下：
值值 说明说明
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向
是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top 裁剪模式，不缩放图片，只显示图片的顶部区域
bottom 裁剪模式，不缩放图片，只显示图片的底部区域
center 裁剪模式，不缩放图片，只显示图片的中间区域
left 裁剪模式，不缩放图片，只显示图片的左边区域
right 裁剪模式，不缩放图片，只显示图片的右边区域
top left 裁剪模式，不缩放图片，只显示图片的左上边区域
top right 裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
bottom
right
裁剪模式，不缩放图片，只显示图片的右下边区域
解决方案解决方案1：：
咔咔一顿读和理解，最终确定widthFix缩放模式可以达到朕想要的效果，所以给image添加mode=“widthFix”，效果甚是完
美
image{
width: 100%;
}
解决方案解决方案2：：
image组件中还有一个bindload属性，该属性的作用是当图片加载完成以后会触发所设置的回调函数，函数有一个event参
数，在event中有原图片的width和height值，可以获取到以后再设置给image的style中,代码如下：
打印的event对象属性：
wxml代码：
js代码：
weixin_38530202
- 粉丝: 2
- 资源: 876
最新资源
- 前端开发-什么是前端开发-关于前端开发的一些相关介绍
- Sora AI-关于文生视频的使用场景说明
- suno AI文生视频的相关教程和介绍使用
- 什么是后端开发-关于后端开发的一些小介绍分享
- Jurassic Pack Vol. II Dinosaurs 侏罗纪包卷恐龙二号Unity游戏模型资源unitypackage
- Jurassic Pack Vol. III Dinosaurs 侏罗纪包卷恐龙三号Unity游戏模型资源unitypackag
- Ultimate Seating Controller 终极座椅控制器Unity游戏开发插件资源unitypackage
- 什么是人工智能-关于人工智能的相关介绍说明
- Figma Converter for Unity适用Unity的Figma转换器Unity游戏开发插件unitypackage
- Creepy Animatronic Anims 令人毛骨悚然的电子动画Unity游戏动画插件资源unitypackage
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页