title: Bootstrap: force image height to height of row
body: <p>I have a page layout where two <code>div</code>s are aligned next to each other inside a row. One column contains a text of variable length, and the second one contains an image.</p>
  
  <p>The markup is basically the following:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
     &lt;div class="span6"&gt;
        &lt;img src="picture.png"&gt;
     &lt;/div&gt;
     &lt;div class="span6"&gt;
       text&lt;br&gt;text
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I intend is the following: The size of the image should be reduced such that it is exactly as high as the column containing the text. See this <a href="http://jsfiddle.net/2HjcV/" rel="nofollow">jsfiddle</a> for clarification.</p>
  
  <p>Is there any way to achieve this only with CSS? As far as I know, the <code>object-fit</code> CSS3 command would be what I need, but unfortunately it is not well supported (yet?), see <a href="http://caniuse.com/#feat=object-fit" rel="nofollow">caniuse</a>. Setting the image as <code>background-image</code> of the surrounding <code>div</code> is not an option, since the <code>img</code> is needed by a jQuery-plugin afterwards.</p>