2

我是 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";
}
4

1 回答 1

4

而不是在你的 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% 宽度。它应该自动调整图像大小

于 2013-10-22T22:25:18.293 回答