Bootstrap reponsive grid issue

Question

I am using Bootstrap and have following HTML code. I want the left bigger media size stay as width:854px and height:480px; on the regular size display and be responsive in compact display. Currently, it comes with responsive width but height remains the same. Also, I want the background image be responsive as well. What changes shall I need to apply?

`

    <div class="row">
        <div class="col-md-9"> 
            <a class="img-container" href="javascript: void(0);">
                <div class="img-responsive" style="width:854px;height:480px;background-image: url('http://placehold.it/854x480');background-size:100% auto;"></div>
            </a>
        </div>
        <div class="col-md-3">

        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="http://placehold.it/150x84" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <small>08:51</small>
          </div>
        </div>

        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="http://placehold.it/150x84" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <small>08:51</small>
          </div>
        </div>

        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="http://placehold.it/150x84" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <small>08:51</small>
          </div>
        </div>

        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="http://placehold.it/150x84" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <small>08:51</small>
          </div>
        </div>

        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="http://placehold.it/150x84" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <small>08:51</small>
          </div>
        </div>



        </div>
    </div>

</div>`

Bootply

Answer 1

Look at my solution

<div class="container">
     <div class="row">
      <div class="col-md-9"> 
       <a class="img-container" href="javascript: void(0);">
        <img class="img-responsive" src="http://placehold.it/854x480">
       </a>
      </div>
      <div class="col-md-3">

      <div class="media">
     <div class="media-left">
       <a href="#">
         <img class="media-object" src="http://placehold.it/150x84" alt="...">
       </a>
     </div>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       <small>08:51</small>
     </div>
   </div>

   <div class="media">
     <div class="media-left">
       <a href="#">
         <img class="media-object" src="http://placehold.it/150x84" alt="...">
       </a>
     </div>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       <small>08:51</small>
     </div>
   </div>

   <div class="media">
     <div class="media-left">
       <a href="#">
         <img class="media-object" src="http://placehold.it/150x84" alt="...">
       </a>
     </div>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       <small>08:51</small>
     </div>
   </div>

   <div class="media">
     <div class="media-left">
       <a href="#">
         <img class="media-object" src="http://placehold.it/150x84" alt="...">
       </a>
     </div>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       <small>08:51</small>
     </div>
   </div>

   <div class="media">
     <div class="media-left">
       <a href="#">
         <img class="media-object" src="http://placehold.it/150x84" alt="...">
       </a>
     </div>
     <div class="media-body">
       <h4 class="media-heading">Media heading</h4>
       <small>08:51</small>
     </div>
   </div>
      </div>
     </div>
    </div>