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:100vhwidth: 100%;background: url("test.png") no-repeat center;background-size: cover;overflow: hidden;position: relative;}