如何解决前端图片不适配的问题？为什么会这样？

设计师在页面走查的过程中，有时候会发现给到开发的图片被拉伸变形了或者重要信息被剪裁了。这时候我们需要先分析出现图片变形的原因，然后找到合适的方法解决问题，下面我们一起来了解掌握如何解决前端图片不适配的问题。

图片被拉伸变形、重要元素被剪裁掉的主要原因可能有以下几种：

· 一般情况下banner是由后台上传配置的，如果后台上传尺寸和前端的展示尺寸不一致，例如后台只设置了一个上传入口，前端我们需要在手机端、PC端同时展示该banner（两个端展示尺寸不一样），就会出现图片不适配的情况。

· 当用不同型号的手机进行查看时，图片适配方式不一样。

· 对于PC端的动态自适应，开发适配方式使用错误。

如何解决图片不适配的问题？

· 设置后台时可以设置多入口，以匹配后台和不同前端的尺寸。

· 还可以通过设置banner剪裁安全区域更好的展示banner。一般情况下开发会直接使用默认的适配方式，我们可以告诉开发为了避免图片不适配的情况应该设置什么。

· 开发起初就是将一张图片进行无限拉伸适配，在拉伸的过程中使用了错误的属性，所以会造成各种图片变形的问题。可以通过和开发进行沟通，将文案内容设置在安全区域内，其他区域根据窗体尺寸动态剪裁，这样就会很好的解决问题了。

以上就是关于如何解决前端图片不适配的问题以及为什么会出现不适配情况的相关内容解答，设计师可以通过和开发沟通告诉他如何设置，就可以很好的解决图片不适配的问题。