小程序
小游戏
企业微信
微信支付
扫描小程序码分享
有没有办法让一张image实现全屏适配各种宽高不同的屏幕呢? 代码片段 https://developers.weixin.qq.com/s/gi7ZEjmC7YhE
7 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
没有完美的方式。都是尽量保持原图比例，然后裁剪会在所难免
所以会做图时设计一些裁剪安全区域，比如用渐变的方式在底部做一段30px左右的区域用来被裁剪掉的
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
image mode='aspectFill'
计算图片的尺寸根据尺寸去控制盒子的大小，大图就是用背景图片设置background-size：cover，
那个垃圾图片也是同理但是可以用image 设置mode属性，可以用js去控制计算盒子大小，也可以试试css3 的calc函数
看到评论区还有人在问，我说一种我的想法，其实最简单的就是分成两张图，图1是天空白云，图2是楼房绿地垃圾桶，两个image的mode都是widthFix，图1的css{width: 100vw; top:0; position: fixed;} 图2的css{width: 100vw; bottom:0; position: fixed;} 这样，不同屏幕裁剪的区域就只是，天空下面的淡蓝色部分了。
楼主最后是怎么解决的啊？我也是遇到了这样的问题。
准备多个分辨率图，获取手机宽高，计算该使用那张图片？
楼主是否处理好了，同样遇到一样的问题....
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
没有完美的方式。都是尽量保持原图比例，然后裁剪会在所难免
所以会做图时设计一些裁剪安全区域，比如用渐变的方式在底部做一段30px左右的区域用来被裁剪掉的
还有一个方案就是设计图片多款尺寸，适配主流手机屏幕宽高比，比如5：4的，16：9的4：3的，然后动态获取手机宽高比后显示相应的图片，这样比较完美，但是费时也不可能完美适配所有手机型号。
通用做法就是你说的这个方法，原理就是做一些图片的待裁剪区域和设计图片安全区域，需要展示的信息都放安全区域~~
image mode='aspectFill'
计算图片的尺寸根据尺寸去控制盒子的大小，大图就是用背景图片设置background-size：cover，
那个垃圾图片也是同理但是可以用image 设置mode属性，可以用js去控制计算盒子大小，也可以试试css3 的calc函数
看到评论区还有人在问，我说一种我的想法，其实最简单的就是分成两张图，图1是天空白云，图2是楼房绿地垃圾桶，两个image的mode都是widthFix，图1的css{width: 100vw; top:0; position: fixed;} 图2的css{width: 100vw; bottom:0; position: fixed;} 这样，不同屏幕裁剪的区域就只是，天空下面的淡蓝色部分了。
楼主最后是怎么解决的啊？我也是遇到了这样的问题。
准备多个分辨率图，获取手机宽高，计算该使用那张图片？
楼主是否处理好了，同样遇到一样的问题....