Question

我是Bootstrap的新手，并试图重新设计一个由其他人制作的网站。它是一个使用Roots主题的WordPress站点，因此它安装了Bootstrap。我想使用图像作为标题/横幅。我希望图像在所有宽度上与身体尺寸和位置相同。到目前为止，我的代码无效。横幅图像没有调整大小，并且在任何浏览器宽度下都没有与正文对齐。这就是我现在拥有的:(网站是http://brilliantzenaudio.com）

在templates / header.php中，

<header class="banner" role="banner">
  <div class="container">
    <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
       </div>
    </div>
  </div>
</header>

app.css的一些摘录我认为是相关的。让我知道这里是否有遗漏的东西（我不能发布所有app.css，它是数百行），

.content {
   background:#fff;
   padding-top:2em;
}
.home .content {
   padding-top:0;
}

.main { }
.page-header {
   margin: 10px 0 20px 0;
   background: #222;
   padding: 5px;
   border-radius: 5px;
}
.page-header h1 {
   color:#fff;
   margin:0;
}
.page-header h1:before {
   content:  "\00bb";
}

Answer 1

而不是在div中包含图片标记。

您可以设置div的背景图像。尝试这样的事情。

CSS

#test {
   background-image: url("/assets/img/brav-banner-2.jpg");
   height: 295px;
   background-size: 100%;
}

<强> HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="test">
</div>

<强>更新

尝试将图像设置为100％宽度。它应该自动重新调整图像大小

Bootstrap，标题/横幅，匹配宽度和定位到正文

1 个答案: