登录页放大缩小电脑屏幕尺寸，背景图不动，内容支持上下滑动

1、html基本代码

//最外层的宽高占全屏的盒子
<div class="login-container">
     //这是里面的盒子，是用来让表单能上下滑动页面背景图永远只占一屏
    <div class="form-box">    
            //表单
          <form class="login-form">
           ....
          </form>
    </div>
 </div>

2、设置login-container的样式

.login-container{
min-height: 100%;//高度设置全屏
width: 100%;//宽度设置全屏
background: url('loginBg.png');//设置登录页背景图
background-position: center center;//背景图显示位置方式
background-size: cover;//按照最小边沾满全屏
background-repeat: no-repeat;//不平铺

 display: flex;//设为弹性布局
 flex-direction: column;//垂直布局
 overflow: hidden;//设置该盒子在放大缩小屏幕的时候，隐藏超过一屏之外的部分
}

3、设置form-box的样式

.form-box {
    flex: 1;//因为外面的盒子设置弹性布局了，所以这里可以直接设置flex为1
    height: 100%;//高度占父容器的百分比（和父容器的overflow: hidden;不冲突）
    overflow-y: auto;//避免在放大缩小页面的时候垂直方向隐藏掉超过一屏的该盒子的内容，可以滑动展示
}

4、然后login-form就能按照你的想法设置了。

5、这样设置好之后，在放大缩小屏幕尺寸的时候背景图就永远只是一屏的大小，不会变大也不会缩小，但是登录的表单时能放大缩小的，然后如果表单的高超出一屏了也能通过滑动来展示，滑动不会出现背景图平铺或者变形或者出现白色底的情况了。