Question

我一直在努力解决这个问题几个小时，我在整个互联网上搜索都没有运气。

我正试图将这个背景图像放在页面中;但是如图here所示，通过使用此方法，它会拉伸页面的宽度，这意味着您可以滚动浏览页面的宽度。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="bground">d</div>
        </div>
    </body>
</html>

CSS：

div.container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
}

div.bground {
    position: relative;
    width: 100%;
    height: 100%;
    left: -50%;
    background: url('http://cdn.bleedingcool.net/wpcontent/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}

Answer 1

你已经将容器div向右移动了50％，这就是为什么你得到水平滚动条，不是出于图像而是出于div定位。试试这个css：

div.container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
div.bground {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}

Answer 2

https://jsfiddle.net/m2oy2wmw/3/

如果你正在寻找的话，我让你成了小提琴。

你可以随时使用＆＃34; 100vh＆＃34;拥有全高（即使调整屏幕大小）。

＆＃13;

div.container {
    height: 100vh; //100vh to always have 100% height.
    width: 100%;
    background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
    background-size: cover;
    background-position: center center;
}

＆＃13;

<div class="container">
    <div class="bground">d</div>
</div>

＆＃13;

Answer 3

我认为这就是你需要的，让我知道什么不适合你...

body {
    background-image: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

<body>
  
  </body>

以页面宽度背景图像为中心是拉伸页面

3 个答案: