Question

我将.svg文件放置为背景图像。
在小屏幕上还可以，但是当我在大屏幕上显示时，它是从顶部和底部切出的
我要在全屏和全屏模式下以全高/全宽显示背景图像作为原始大小

演示图片

-这是我的代码

.bg {
  width: 100%;
  height: 540px;
  background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     float: left;
     width: 100%;
     border: 1px solid red;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div class="bg"></div>

</body>
</html>

Answer 1

您必须使div height = pageHeight（标题高度和适当的边距应为负）。

.bg{
    width: 100%;
    height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
    background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    border: 1px solid red;
    box-sizing: border-box;
}

<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>

Answer 2

认为它与背景大小有关。也许这对您更有效？（实际上是一样的，如果contain不是您想要的内容，请尝试cover。

background-size: contain;
background-repeat: no-repeat;
background-position: center;

您能不能用图像显示想要的内容。

如何在大屏幕上将背景图像设置为全高宽？

2 个答案: