title: Twitter Bootstrap Auto Resize Picture to take up entire column
body: <p>I'm using bootstrap and I have a row with two columns. One of the columns has one picture in it which should take up all of the space in the column. The column on the right has three rows in it with 2 pictures in each row. But so far I can't get the image on the left to resize correctly and just stays at a small fixed size. 
  Here is the code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/custom2.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
          &lt;div class="col-md-12"&gt;
  
              &lt;div class="row"&gt;
                  &lt;h2&gt;Recent&lt;/h2&gt;
  
                  &lt;div id="myGallery" class="col-md-7"&gt;
                      &lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                   &lt;div class="col-md-5"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;br&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;br&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="col-md-6"&gt;&lt;a href="#"&gt;&lt;img src="images/9-12,13 40.jpg" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                   &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my css</p>
  
  <pre><code>img
  {
   max-width:auto; 
   max-height:auto;   
  }
  </code></pre>
  
  <p>I have been able to set a minimum width for it like</p>
  
  <pre><code>.myClass img{
      min-width: 775px; 
  }
  </code></pre>
  
  <p>but if the browser window size changes then it stays the same size and doesn't look as good.</p>
  
  <p>Here is what it currently looks like
  <img src="https://i.imgur.com/AnTO0D6.png" alt="before"></p>
  
  <p>And it should look like this
  <img src="https://i.imgur.com/gTqiflu.jpg" alt="after"></p>
  
  <p>How do I go about fixing this in the css?
  Thanks for the help!</p>