为何图片不铺满屏幕？

Question

<template>
    <div class="login-container">
        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" 
            label-position="left" label-width="0px" class="login-form">
        <el-form-item prop="name">
            <el-input name="name" type="text" v-model="loginForm.name" autoComplete="on" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
                autoComplete="on" placeholder="密码"></el-input>
            </el-form-item>
             <el-form-item>
              <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
                登 录
              </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'login',
    data () {
        const validateUsername = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户名不能为空'))
            } else {
                callback();
            }
        };
        const validatePass =(rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('密码不能为空'))
            }
        };
        return {
            loginForm: {
                name: '',
                password: ''
            },
            loginRules: {
                name: [{required: true, trigger: 'blur', validator: validateUsername}],
                password: [{required: true, trigger: 'blur', validator: validatePass}]
            },
            loading: false,
            pwdType: 'password'
        }
    },
    methods: {
        
}
</script>
<style lang="scss">
    .login-container {
        width: 100%;
        height: 100%;
        background: url(../assets/images/auth-bg.jpg) no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
        .login-form {
            width: 300px;
            margin: 20px auto;
            height: 20%;
            top: calc(50% - 15px);
        }
    }
</style>

为什么背景图片不铺满浏览器？

Answer 1

已经铺满了，因为你的容器就那么高，最外层容器用 height:100%; 是没效的，你不给实际高度它就要靠里面的内容撑大，把高度100%，改成 100vh ,强制等于屏幕的高度吧

.login-container{
    height:100vh;
}