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

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

图片说明

自己解决了

问题原因:

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

解决方案

  1. 采用整数 px 绘制元素宽高(不是很推荐)。
  2. rem放大4倍宽高后,使用zoom 或scale 缩放回原来倍数。(zoom 和scale 不通用但是都能缩放,具体区别大家自行搜索)

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

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

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

宽度和高度没有自适应显示窗口大小,图片的宽和高设置分别设置成百分比就ok了
不会啊,以窗口的大小自适应百分比,窗口放大或缩小,图片都会自适应宽和高

这个下箭头的 样式

图片说明