收藏
回答

小程序image如何实现全屏适配所有机型?

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


回答关注问题邀请回答
收藏

7 个回答

  • Admin²⁰²¹
    Admin²⁰²¹
    2020-05-13

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

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

    2020-05-13
    有用 3
    回复 6
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      你好,上面那张图这个目前只能用填充色来适配被裁剪的区域吗,如果两侧跟底部区域的图案都要保留的话,是不是只能换张设计图了?
      2020-05-13
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-13回复/迷茫的人生/
      恩,你说的方案可以的。
      还有一个方案就是设计图片多款尺寸,适配主流手机屏幕宽高比,比如5:4的,16:9的4:3的,然后动态获取手机宽高比后显示相应的图片,这样比较完美,但是费时也不可能完美适配所有手机型号。
      通用做法就是你说的这个方法,原理就是做一些图片的待裁剪区域和设计图片安全区域,需要展示的信息都放安全区域~~
      2020-05-13
      回复
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      类似媒体查询,活动屏幕宽高比,动态设置src么?估计我们设计肯定不想这么做,哈哈
      2020-05-13
      1
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-13回复/迷茫的人生/
      恩,估计你也不想这么做的。
      2020-05-13
      回复
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      没办法了,只能试着说服他们改下设计图了
      2020-05-13
      回复
    查看更多(1)
  • xy
    xy
    2020-05-13

    image mode='aspectFill'


    2020-05-13
    有用 1
    回复 5
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      你好,上面的截图已经贴出了设置mode各个值使用的问题,想问下有什么办法保持图片原来的宽高比
      2020-05-13
      1
      回复
    • xy
      xy
      2020-05-13回复/迷茫的人生/
      background-size:cover 不可以吗?
      2020-05-13
      1
      回复
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      同样会被裁剪
      2020-05-13
      回复
    • xy
      xy
      2020-05-13回复/迷茫的人生/
      你这张图片有问题把?background-size:100% 100%;已经是满屏了
      2020-05-13
      1
      回复
    • /迷茫的人生/
      /迷茫的人生/
      2020-05-13
      试下别的屏幕的,比如iphone5,或者其他屏幕的
      2020-05-13
      回复
  • A notorious liar(小花猫)
    A notorious liar(小花猫)
    2020-05-13

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

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

    2020-05-13
    有用 1
    回复 7
    查看更多(2)
  • 宋晓建
    宋晓建
    2020-08-20

    看到评论区还有人在问,我说一种我的想法,其实最简单的就是分成两张图,图1是天空白云,图2是楼房绿地垃圾桶,两个image的mode都是widthFix,图1的css{width: 100vw; top:0; position: fixed;} 图2的css{width: 100vw; bottom:0; position: fixed;} 这样,不同屏幕裁剪的区域就只是,天空下面的淡蓝色部分了。

    2020-08-20
    有用
    回复
  • Z.P
    Z.P
    2020-07-18

    楼主最后是怎么解决的啊?我也是遇到了这样的问题。

    2020-07-18
    有用
    回复
  • Javaer
    Javaer
    2020-06-17

    准备多个分辨率图,获取手机宽高,计算该使用那张图片?

    2020-06-17
    有用
    回复
  • Poong
    Poong
    2020-05-15

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

    2020-05-15
    有用
    回复
登录 后发表内容
问题标签