Question

我有一个引导头，我想将图像设置为背景。我做到了，但是图像没有覆盖标题的整个宽度，到达了某个点，然后像这样重复自身： header 当我应用css规则no-repeat时，它只会剪切图片，并且又不会填满jumbotron div的整个宽度，我该怎么做，以使整个图像完全延伸到div的末尾，这是我的html ：

<div class="jumbotron">
    <div class="placeholder"></div>
    </div>
    <div class="container">
            <h2>Add a new Animal</h2>
    <div class="form-group">
    Species: <input type="text" id="species" class="form-control">
    Name: <input type="text" id="name" class="form-control" >
    Age: <input type="text" id="age" class="form-control">
    Last Fed: <input type="date" id="last-fed" class="form-control">
    Last Shed: <input type="date" id="last-shed" class="form-control">
    Addition Info: <textarea class="form-control"></textarea>
    <button id="btnCreate" class="btn btn-primary">Create</button>
    </div>
    <ul id="animals"></ul>
    <h3>View Current Animals</h3>
    <button id="btnLoad" class="btn btn-info">Load Animals</button>
    </div>
    </div>

和我的CSS：

button:hover {
    cursor: pointer;
}

.jumbotron {
    background: url('./../images/Header.jpg') ;
    height: 300px;

}

Answer 1

您可以尝试

.jumbotron {
    background: url('./../images/Header.jpg') ;
    backgound-size: cover;
    height: 300px;
    backgroud-position: center center;

}

如果没有，则必须查看此链接https://www.w3schools.com/css/css3_object-fit.asp

祝你好运

Answer 2

添加background-size: cover，它将始终覆盖整个页眉，然后添加background-position: center，如果存在裁剪部分以保持纵横比，它将从侧面进行裁剪并使图像居中。

.jumbotron {
    background-image: url('./../images/Header.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;

}

Answer 3

最好给相对的容器指定特定的高度和宽度，并在处理容器尺寸时尽可能使用vh，vw等相对单位。

.jumbotron{
    max-width: 100vw; 
    max-height: 100vh; /* or you can use 100% to expand it through the available space */
    background: url('./../images/Header.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

请在此处注意background-size，background-repeat和background-position属性。您可以根据自己的喜好使用不同的相关属性来调整它们。

https://www.w3schools.com/css/css_background.asp，您可以将其用作资源

如何用图像填充整个标题

3 个答案: