uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容

前言

网上的很多文章的教程都有一定问题，要么不会自动适应手机尺寸，要么写一堆 js 判断手机宽高，兼容性极差且代码臃肿。

在 uni-app 项目中，经常遇到 H5 活动页、营销页、图片背景元素点缀等需求，

需要一张背景大图来做平铺，并且要适应各种机型（不同屏幕尺寸），

本文从 0-1 快速实现该功能，您只需要复制粘贴即可，

如下图所示，在任何机型与屏幕宽高下，依然能 “丝滑” 的拉伸兼容：

兼容 uni-app 全端，支持【纯】微信小程序项目使用

解决方案

推荐使用平台一键复制功能，避免漏选。

您随便找个新页面，复制运行起来即可。