關於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;
}