Vue背景图片自适应大屏与小屏

1，父绝子相

效果是台式看的更多，笔记本看部分。但是图片不会变形

<div class="father" style="width:100%; position:relative">
<img src="test.png" class="son" style="width:1920px; position:absolute; top:0; left:50% margin-left:-50%"></img>
</div>

2. 背景图片随着浏览器放大缩小

<template>
  <div class="login-container">
  </div>
</template>

.login-container {
  min-height: 100%; 或者 min-height:100vh
  width: 100%;
  background: url("test.png") no-repeat center;
  background-size: cover;
  overflow: hidden;
  position: relative;
 }