Bootstrap, header/banner, matching width and positioning to body

Question

I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is http://brilliantzenaudio.com )

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

Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),

.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

Instead of having an image tag inside your div.

You could set the background-image of the div. Try something like this.

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>

Update

Try setting your image to 100% width instead. It should automatically re size the image