全尺寸的背景图像，但屏幕的第二半仍然是空的

Question

我的 vue.js 应用程序有问题，当我检查元素时，它告诉我背景图像的最大重量和最大高度，但它看起来像这样：

enter image description here

这是我的 html：

 <div class="hero-image">
<div>
<h1 class="text-center mb-5" >Prijava</h1>
</div>
 <form @submit.prevent="signin">
   <div class="kontejner">
    <div class="form-group">
      <label style="margin-left:1.3%" class="forma" for="korisnicko_ime">Korisnicko ime</label> <br>
      <input v-model="email" type="email" class="form-control" id="emailField" aria-describedby="emailHelp"  > 
    </div> <br>
    <div class="form-group">
      <label style="margin-left:-4%" class="forma" for="passwordField">Lozinka</label> <br>
      <input v-model="password" type="lozinka" class="form-control" id="passwordField" >
    </div> <br>
   </div>
      <button type="submit" class="btn mt-5">Prijava</button> </form> 
       <small id="emailHelp" class="form-text-text-muted">Niste registrirani?</small>
 </div>

这里是app.vuehtml代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

这是我的 css 代码，但我尝试了所有方法，包括更改我的宽度和高度，但仍然没有，它仍然被识别为全屏，但无论如何它被切成两半...

.hero-image {
background-image: url("/assets/zrnca2.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;

非常感谢你的帮助！

Answer 1

只需使用'cover':

html { 
  background: url("http://placekitten.com/200/300") no-repeat center center fixed; 
  background-size: cover;
}

<html>
</html>

Answer 2

CSS3 具有属性背景大小的值 'cover' 或 'contain'，这可能是您的情况的解决方案。

'cover'：使背景图片覆盖整个容器，但如果图片大小与容器大小不匹配，则会拉伸或裁剪图片。

'contain': 将使背景图像完全可见

像这样：

background-size: cover;

或：

background-size: contain;

或两者：

background-size: contain, cover;

很难说什么最适合你，因为我没有在上下文中看到你的代码，但我认为 'contain' 或组合 'contain, cover' 将是你情况下的最佳解决方案.

在此处阅读有关 'contain' 和 'cover' 的更多信息：https://www.w3schools.com/cssref/css3_pr_background-size.asp

全尺寸的背景图像，但屏幕的第二半仍然是空的

Background image on its full size but 2nd half of a screen is still empty

html

css

background-image

vue.js