Bootstrap Jumbotron拉伸

Question

我在这个网站上有一个引导标题，你可以在这里看到：http://www.healthunit.org/checkeredflags/index.html

我想知道我是否有办法让图像停止扩展，比如x像素并保持静止，每边都有黑条。也就是说，图像将保持相同的大小，但随着屏幕的拉伸，黑色背景将根据需要显示在图像后面。这是jumbotron：

<header>
<div class="jumbotron">
    <img class="img-responsive image" src="Images/CheckFlag.png" alt="Checkered Flags Banner">
</div>

Answer 1

您可以使用max-width css属性。

 <div class="jumbotron" style="background-color: black;">
   <img class="center-block image img-responsive" src="Images/CheckFlag.png" alt="" style="max-width: 400px;">
</div>