关于app背景图被拉伸的问题

最近在做APP项目时，遇到一些商城活动页需要使用背景图的问题，但是要适用不同手机型号，尤其是现在的大屏幕手机，手机普遍比较长的兼容性问题。

刚开始是直接用jpg图片做背景图，考虑到jpg图片要比png图片小，但是效果不是很理想，出现图片被拉伸的问题。

最后使用的是用png图片，把相关元素抠出来放在一张图片上，然后用背景颜色进行填充。

 

 高度height设为100vh，及手机整屏的高度；

背景background设置图片颜色、top、center；

背景图大小设为图片大小，这样就可以保证图片不失真，超过图片的高度就使用背景颜色进行填充。

.jiaRuYaoQing{
    width: 100%;
    height: 100vh;
    background: #ED6260 url(~@/static/img/pageimg/jiaRuYaoQing_bg.png) no-repeat top center;
    background-size: 750upx 1265upx;
}