.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
使用image src时,它显示没有问题https://jsfiddle.net/ohzcdav9/
但是当使用背景图像时会出现此问题。它应该是100%的宽度,并且应该显示整个图像。

最佳答案

您已将height设置为83vh。将height设置为100vh将允许图像占据整个浏览器height,从而允许显示完整图像,尽管这可能会根据您的浏览器尺寸使图像变形(由于background-size: cover)。

请注意,如果您将其用作整页背景,则还需要在margin: 0上设置body以避免滚动条,如下所示:



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>

关于css - 背景图片显示不正确,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57881735/

10-09 15:14
查看更多