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

原创于 2025-07-26 16:10:44 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

有时候设置图片尺寸经常会出现图片无法占满整个屏幕的情况，比如下面：
在继续论述前先介绍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; 
}