如何在引导程序中将图像适合 jumbotron？答案

【问题标题】：how to fit an I mage to jumbotron in bootsrap?如何在引导程序中将图像适合 jumbotron？
【发布时间】：2015-04-30 07:08:49
【问题描述】：

我的图像尺寸为宽度 1800 像素和高度 200 像素

我的代码..

<style>
    .jumbotron1{
    background-image:  url(/img/ffHeadernologo.png);
    background-size: cover;
    text-align: center;
    width:100%;
    padding-bottom: 11.1111% /* ( 1800 / 200 ) = 9; 100 / 9 = 11.1111 */
    max-height: 100%;
    overflow: hidden;
}
</style>

我想做的是..

这是我的背景

我也有如下标志

徽标应该在另一个 div 中，并且背景设置为如上所示。

我想要这样的结果

我该怎么做才能使上述解决方案无法很好地解决这个问题？

我之前看到过的任何建议相同的问题，但它不起作用，所以我又问了一遍。

在第三张图片中，必须存在的黑线已被删除。谢谢你

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

只需将responsive-img 类添加到图像标签的类属性中

编辑：

因为你正在使用background-image我们这个css

CSS

<style>
    .jumbotron1{
        background-image:  url(/img/ffHeadernologo.png);
        background-size: cover;
        text-align: center;
        width:100%;
        height: 200px;
        overflow: hidden;
    }
</style>

请注意，这将保持纵横比不变，但如果屏幕高于该纵横比，它将在上方和下方显示空间，另一方面，如果屏幕比该纵横比更窄，它将裁剪右侧图片的

编辑：

您似乎只想要一张背景图片。我这种情况我建议你只使用以下css

body { 
    background: url(/img/ffHeadernologo.png) no-repeat center center fixed; 
    background-size: cover;
}

编辑：

您实际上是在尝试制作带有背景的标题。为此，您可以使用此

CSS

(Demo)

.jumbotron {
    background: url(http://placehold.it/1800x200/225599/ffffff) no-repeat center center fixed; 
    background-size: cover;
    height: 200px;
}

【讨论】：

我没有使用标签，我将其作为背景
它工作正常，但我想在那个 div 中设置另一个 div，所以它不能在那里工作我该怎么做？
实际上这是我的标题背景，我的正文背景不同，所以我的正文背景会覆盖它还是会发生什么

【解决方案2】：

查看这个示例，我只是使用了 background:url() 技术

      <html>

<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<style type="text/css">
 .jumbotron{ background: url(http://cdn.superbwallpapers.com/wallpapers/vector/blue-polygon-28641-1920x1080.jpg);}.jumbotron{width:100%;height:100%}
</style>
</head>
<body>
<div class='container'>

<div class='jumbotron'>Hell</div>

</div>

</body>
  </html>

【讨论】：

我使用的是相同的，但我的图像不适合 jumbotron
你想让jumbotron的尺寸和图片的尺寸一样吗，为什么要使用jumbotron呢？制作一个 DIV 比
如何使用 div ？我的图像应该在背景中，div 应该完全适合图像