.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/