如何使图像占据整个空间？

Question

我正在建立一个网站，并且想在标题部分给出图像，这是我在HTML文件中的代码

<header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8 col-md-12">
                    <h1>Tourister</h1>
                    <p style="padding:40px"></p>
                    <p>We take inspiration from the World's best 
                        touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
                        provide throughout the year !
                    </p>
                </div>
            </div>
        </div>
</header>

而且我在CSS文件中使用了此代码。

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;

}

现在的问题是，我的图像并没有占据下图所示的整个高度和宽度。 在此处输入图片说明

我希望它占据整个空间，我使用了不同大小的图像，但没有用，没有一个占据窗口的整个空间。 因此，我们将不胜感激。感谢您。

注意：我读过其他问题，图像不能在堆栈溢出时占用整个宽度，但无法正常工作。

Answer 1

您要查找的属性是background-size 。

将此添加到您的代码

.jumbotron {
  ...
  background-size: cover; /* Can also be "contain" */
  ...
}

Answer 2

注意：我不完全确定您要将类（或可能是ID）应用于标头，而不是较小的div之一。 可能取决于您要做什么。

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

看到其他答案：这还取决于图像的特性和您喜欢的显示类型。 封面！= 100％x 100％！=包含。 参见CSS3 background-size属性“ Try-It” 。

Answer 3

您将要在.jumbotron类上为CSS添加background-size: cover 。 这将确保背景图像始终是元素的完整大小，而不会扭曲宽高比。

Answer 4

试试看。

.jumbotron {
background-image: url("../img/image6.jpg");
color: white;
background-attachment:fixed;
min-height:400px;
margin-top:0px;
margin-bottom:8px; }

Answer 5

如果您还没有尝试过，请尝试100％的宽度；如果这样做没有帮助，请尝试增加该值。

Answer 6

将background-size属性cover添加到巨型机

.jumbotron{
  background-size: cover;
 }

Answer 7

background-size: cover;

除非图像的纵横比与div相同，否则contain将保留空间。

Answer 8

您可以使用css属性：background-size：cover;

参见： http : //codepen.io/anon/pen/pbLyRp

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("https://pixabay.com/static/uploads/photo/2015/08/24/12/54/banner-904889_960_720.jpg");
background-repeat: no-repeat;
background-size:cover;
}

和http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Answer 9

我尝试了您的代码，并使用563 kb大小的图像，但您的工作正常。您应为此使用大尺寸图像或使用

   background-size:cover; in your css