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

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

图片说明

5个回答

自己解决了

问题原因:

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

解决方案

  1. 采用整数 px 绘制元素宽高(不是很推荐)。
  2. rem放大4倍宽高后,使用zoom 或scale 缩放回原来倍数。(zoom 和scale 不通用但是都能缩放,具体区别大家自行搜索)
不会啊,以窗口的大小自适应百分比,窗口放大或缩小,图片都会自适应宽和高
stopllL
white_g 考虑了窗口的放大缩小,可是屏幕的宽高比呢。如果宽高分别设置百分比 一个基于外层盒子的宽,一个基于外层盒子的高! 如果外层盒子宽高比在变呢。就是屏幕长宽比改变。
2 年多之前 回复

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

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

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

github_38725775
算不算码农 就是变形了,因为是圆形png图 宽高是相等的 ,google浏览器上容器大小都是一样的。放手机上就有明显的压扁问题,我觉得可能是手机的问题,或者图片的问题,给的是20px的图,缩放算法 (窗口宽度)/7.5
2 年多之前 回复
宽度和高度没有自适应显示窗口大小,图片的宽和高设置分别设置成百分比就ok了
github_38725775
算不算码农 贴一张代码给你看看
2 年多之前 回复
stopllL
white_g 图片宽高都设置百分比会变形吧?
2 年多之前 回复

这个下箭头的 样式

图片说明

stopllL
white_g 回复算不算码农: 对啊,所以问你嘛。理论上就是设置一边,另外一边等比缩放。现在不是等比缩放不成功吗。而且明显是宽缩放成功了,高度设置反而不对! 你先看看是不是外层盒子影响的,你的max-width是基于外层盒子的吧。然后试试看宽高都分别设置一下。其实还有个可能是rem计算px的时候有小数误差不是会不会有这个情况
2 年多之前 回复
github_38725775
算不算码农 回复鸟与礁: 图片只设置一边另一边不是会自动等比缩放吗
2 年多之前 回复
stopllL
white_g 回复算不算码农: 你有设置宽度么,除了这个max-width
2 年多之前 回复
github_38725775
算不算码农 如果都是扁的 就肯定是样式问题,不过手机上 显示的是个别几个变形。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问