github_38725775
算不算码农
2017-07-13 02:10
采纳率: 100%
浏览 6.8k

H5 app页面图片显示问题,很头疼

如图 有几个图片被无形的力量压扁了,怎么破,求大神支招

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • github_38725775
    算不算码农 2017-07-25 09:56
    已采纳

    自己解决了

    问题原因:

    在rem转换成px时难免有小数存在,在宽高比较小时候图片就会出现高度或者宽度解析问题。

    解决方案

    1. 采用整数 px 绘制元素宽高(不是很推荐)。
    2. rem放大4倍宽高后,使用zoom 或scale 缩放回原来倍数。(zoom 和scale 不通用但是都能缩放,具体区别大家自行搜索)
    点赞 评论
  • u014074697
    张大教主 2017-07-13 02:25
    宽度和高度没有自适应显示窗口大小,图片的宽和高设置分别设置成百分比就ok了
    
    点赞 评论
  • u014074697
    张大教主 2017-07-13 02:39
    不会啊,以窗口的大小自适应百分比,窗口放大或缩小,图片都会自适应宽和高
    
    点赞 评论
  • stopllL
    white_g 2017-07-13 02:39

    题主,没原图没看出来什么图片被压扁了啊!

    理解一下压扁了,就是变形了。
    webapp这种项目的适配,就是百分比和rem占多数,他们各有优劣。
    百分比的好处是能保证屏幕内容显示相同,但是会照成图片变形的问题。
    rem的好处就是保证图片不变形,但是屏幕越大,每屏显示的内容越少。

    题主的被未知力量变形了,可以认为是图片被挤变形了。
    如果是背景图,就看看外层盒子是否变形了,变形原因。
    如果是img标签,那就直接看看img标签设置的属性,宽高比等。

    点赞 评论
  • github_38725775
    算不算码农 2017-07-13 03:11

    这个下箭头的 样式

    图片说明

    点赞 评论

相关推荐