自己解决了

问题原因:

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

解决方案

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

不会啊，以窗口的大小自适应百分比，窗口放大或缩小，图片都会自适应宽和高

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

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

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

宽度和高度没有自适应显示窗口大小，图片的宽和高设置分别设置成百分比就ok了

这个下箭头的 样式