问题背景

近期公司有个管理系统前后端分离，但是前端人员不够，只能我们后端来凑，而在前端的开发过程中总是遇到一些特简单却很尴尬的问题，就像这次在vue的单文件中引入背景图，但是却出现四周有空白的问题。

初始引入背景图

由于之前接触vue比较少，所以baidu和google一些资料之后，作出了第一版，代码如下

<template>
	<div>
   		<img src="../imgs/login.jpg">
	</div>
</template>

这里只在template下配置了img标签，其他的js和css都没有配置，这样的效果图如下：

背景图四周有空白，且如果背景图片过大，右侧会有滑动条，这样做出来的网站的背景图并不理想。
之后又是一顿baidu&google操作，终于找到css的配置，如下。

更新后的背景图设置

上面的template中为最外层的div添加类，并为img设置css格式，在vue单文件中的<style>内添加css配置，代码如下：

 <template>
 	<div class="hello">
			<img src="../imgs/login.jpg" style="width: 100%; height: 100%">
 	</div>
</template>

<style scoped>
.hello {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;  // 这里是设置与顶部的距离
    left: 0px;  // 这里是设置与左边的距离
  }
</style>

更新后的背景图效果为 ：

问题解决。