如何让我的法师适应靴子中的jumbotron？

时间：2015-04-30 07:08:50

标签： css twitter-bootstrap

我的图像尺寸宽度为1800px，高度为200px我想要创建一个jumbotron，其中图像应该适合该jumbotron意味着jumbotron尺寸也应该是这样，所以我可以看到我的全貌，它也应该是响应

我的代码.. 

<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>

我想做的是......

这是我的背景

enter image description here

我也有以下徽标

enter image description here

徽标应该在另一个div中，并且背景已经设置为其工作正常。

我想要这样的结果

enter image description here

我怎么能这样做，上面的解决方案不能很好地做这个怎么办？

我之前看过同样问题的任何建议，但它没有工作，所以我再次问过它。

在第三张图片中，黑线已被移除，必须在那里。 谢谢

2 个答案:

答案 0 :(得分：2)

只需将responsive-img类添加到图片代码的class属性

即可

修改

因为您正在使用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;
}

答案 1 :(得分：0)

检查此示例我只使用了背景：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>

相关问题
最新问题