title: make image fit height of bootstrap 3 grid
body: <p>In a bootstrap 3 grid, one of the columns contains an image. How can one make it 100% height of another column? (with biggest height)</p>
  
  <p>img-responsive will fit the width, but not the height. Here's a fiddle: <a href="http://jsfiddle.net/mariusandreiana/V2Hy6/17/" rel="nofollow">http://jsfiddle.net/mariusandreiana/V2Hy6/17/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;some content&lt;/div&gt;    
      &lt;div class="row bg"&gt;
          &lt;div class="col-xs-1"&gt;Text&lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;p&gt;
                  &lt;h1&gt;John Dough&lt;/h1&gt;
                  1155 Saint. St. #33
                  &lt;br/&gt;Orlando, FL 32765&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-5"&gt;
              &lt;img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;more content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.</p>
  
  <p>One option would be to use javascript to set img's height, but can it be done only via CSS? Would a table be a better fit than the grid?</p>
  
  <p>Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.</p>