html - 图像不能正确缩小

Question

所以我有背景图像，当浏览器占据整个屏幕时，它会正确显示。当我缩小浏览器窗口时，图像缩小到一个点，然后突然停止。这就是发生的事情：

我只有一个 .CSS 文件，其中包含：

.fondo {
  width: 100%;
  height: auto;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url("src/assets/images/fondo.png");
  background-size: cover;
  background-position: center center;
}

.html 文件有：

<div class="fondo img-fluid"></div>

标签： htmlcssbootstrap-4

Answer 1

您需要的是高度vh和宽度vw：

摆弄玩耍。

.fondo {
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-image: url("http://placekitten.com/301/301");
  background-size: cover;
  background-position: center center;
}

<div class="fondo img-fluid"></div>