html - Bootstrap、页眉/横幅、匹配宽度和定位到正文

Question

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

在模板/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% 宽度。它应该会自动调整图像大小