收藏
回答

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

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


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

6 个回答

  • Admin²⁰²⁰
    Admin²⁰²⁰
    05-13

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

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

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

    image mode='aspectFill'


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

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

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

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

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

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

    05-15
    有用
    回复
  • A notorious liar
    A notorious liar
    05-13

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

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

    05-13
    有用
    回复 7
    查看更多(2)
登录 后发表内容
问题标签