css - 背景图片显示不正确

Question

.header {
  background-image: url('https://i.imgur.com/kdsPrQt.jpg');
  height: 83vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

<div class="header">
jkjk
</div>

这是完整的图像 https://i.imgur.com/kdsPrQt.jpg使用图像 src 时它显示没有问题 https://jsfiddle.net/ohzcdav9/但是当使用背景图片时就会出现这个问题。它应该是 100% 宽度并且应该显示整个图像。

Answer 1

您已将高度设置为83vh。将 height 设置为 100vh 将允许图像占据整个浏览器 height，从而允许显示完整图像，尽管它可能会扭曲图片基于您的浏览器尺寸(由于 background-size: cover)。

请注意，如果您将其用作整页背景，您还需要在 body 上设置 margin: 0 以避免滚动条，因为可以可见于以下:

body {
  margin: 0;
}

.header {
  background-image: url('https://i.imgur.com/kdsPrQt.jpg');
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

<div class="header"></div>