html - 如何用图像填充整个标题

Question

我有一个 Bootstrap header ，我想将图像设置为背景。我做到了，但图像没有覆盖标题的整个宽度，它到达某个点，然后像这样重复自己: 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

祝你好运