html - 图片覆盖全屏，底部留白

Question

我希望我的图像完全覆盖背景。此外，如果除了背景之外任何方向都没有内容，我不想要滚动条。

以下是我能得到的最好的，除了我在底部有大约 1 英寸的空白并且水平滚动到大约 95%。

SCSS

body, html {
  padding: 0 !important;
  margin: 0 !important;
}

.workspace {
  background: url("../../../assets/Images/WhatIsHunter.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

Answer 1

在 CSS 中，height 属性的百分比单位是相对于父元素的高度的。因此，根据 .workspace 在 DOM 中的位置，100% 可能有不同的含义。

要覆盖整个视口(viewport)，请使用 vh 单位。

.workspace {
  height: 100vh;
}

来自 MDN article on units (强调我的):

vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.

因此，其中一百个将构成视口(viewport)的整个高度，这就是您所需要的。