小程序image如何实现全屏适配所有机型?
发布于 6 年前 作者 renmin 12104 次浏览 来自 问答

有没有办法让一张image实现全屏适配各种宽高不同的屏幕呢? 代码片段 https://developers.weixin.qq.com/s/gi7ZEjmC7YhE

4 回复

楼主是否处理好了，同样遇到一样的问题…

image mode=‘aspectFill’

没有完美的方式。都是尽量保持原图比例，然后裁剪会在所难免

所以会做图时设计一些裁剪安全区域，比如用渐变的方式在底部做一段30px左右的区域用来被裁剪掉的

计算图片的尺寸根据尺寸去控制盒子的大小，大图就是用背景图片设置background-size：cover，

那个垃圾图片也是同理但是可以用image 设置mode属性，可以用js去控制计算盒子大小，也可以试试css3 的calc函数

回到顶部