微信小程序图片自适应屏幕大小真的有效
2023-04-18 14:26:01 时间
最近在接手一个小程序的项目开发,在前端开发的时候,发现一个大家很经常要用到的图片自适应手机屏幕大小的问题,这是一个简单但是很容易让人入坑的事情,
看如下代码:
wmxl代码
< view class=“imgs” >
< images src=“图片地址” mode=“widthFix”
< /view>
wxss代码
.imgs{
display:flex;
width:100%;
height:auto;
}
这样的结果看上去会根据屏幕的大小改变大小,因为上面两个属性,已经固定了宽度。高度auto了
但是结果。。。你编译了N变,图片还是老样子,不改变大小。高度也没发生变化。
看了很多文章,很多人都说方法很简单,但是都没说到点子上。说加了一个mode="widthFIx” 属性,给定一个固定的宽度。例如720rpx,高度auoto,这样图片就会根据手机屏幕的大小而改变。达到自适应屏幕的要求。
现在问题来了,这个固定屏幕宽度加哪里呢,wxss中?不是,这个固定屏幕的高度一定要在wxml页面中
wmxl代码
< view class=“imgs” >
< images src=“图片地址” mode=“widthFix” **style=“width:750rpx”>**加在这里才有效果
< /view>
wxss代码
.imgs{
display:flex;
width:100%;
height:auto;
}
上面这段代码才能真正有效解决图片自适应屏幕大小。
相关文章
- 2020年度CCF-腾讯犀牛鸟基金—结题评优结果出炉!
- Aggregated APIServer 构建云原生应用最佳实践
- Android 常用设计模式
- 优酷app参数分析
- android加密参数定位方法
- 巧用腾讯云云函数打造微信网页授权公用服务
- 某汽车社区App 签名和加解密分析
- 009:独立的app整合
- 019:Django微信支付宝支付
- 简述3D打印机在生活中的应用在哪些方面
- windows微信公众号采集系统
- 985毕业的“打工人”,Android开发2年被裁,重新出发终于拿下字节offer
- IDEA创建Android项目并反编译APK
- Android常用反编译工具
- 微信小程序反编译
- charles修改接口返回值
- itchat微信好友信息统计(性别区域)
- itchat 微信登陆login.py文件源码查看
- 一个简单的搜狗微信公众号案例
- Android平台基于RTMP或RTSP的一对一音视频互动技术方案探讨