Vue当中背景图无法占满屏幕的解决方法

有时候设置图片尺寸经常会出现图片无法占满整个屏幕的情况，比如下面：
在继续论述前先介绍vue（可能也包括其他前端框架）里面标识长度的不同方式：

• px：像素，缺点是往往无法根据页面尺寸而动态调整比例
• rem：能够自适应移动端的布局
• vh(viewport width) ： 表示视觉宽度的比例（1~100）
• vw (viewport height) ：表示视觉高度的比例（1~100）

一般而言后两者会更为常用于网页端，也更方便实时操作大小

回到问题：检查后端背景图片的代码如下：

#main {display: flex;justify-content: center;align-items: center;width: 100vw;min-height: 100vh;// 设置背景图片background-image: url('@/assets/background2.png'); background-size: cover; background-position: center; 
}

发现指定宽度和高度的属性名称也不太一样

修改属性名称为min-width，问题解决：

#main {display: flex;justify-content: center;align-items: center;min-width: 100vw;min-height: 100vh;// 设置背景图片background-image: url('@/assets/background2.png'); background-size: cover; background-position: center; 
}