Bootstrap 导航图片

Question

我正在尝试将图像应用于导航栏背景，我希望该图像的宽度为 100%，高度为 50%，但是图像被截断了，我想知道是否可以自动调整图像大小，以便它当活动 window 大小更改时适合并调整大小。

HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<h1>Some catchy line here...</h1>
<center>
<a class="button purple" href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-star" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa fa-clock-o" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-handshake-o" aria-hidden="true"></i> Home</a>
<a class="button purple" href="#"><i class="fa fa-question-circle" aria-hidden="true"></i> Home</a>
</center>
</nav>

https://jsfiddle.net/bkezwpgg/1/

谢谢。

Answer 1

请将background-size: cover;添加到.navbar

Bootstrap 导航图片

Bootstrap navigation image

image

autosize

navbar

twitter-bootstrap