title: Bootstrap CSS: Make img zoom to fill entire table cell
body: <p>I'm having trouble getting an image to show in a cell of a table and fill up the entire space without stretching.</p>
  
  <p>This is <strong>what's happening</strong> (Image is <em>stretched</em>):</p>
  
  <p><img src="https://i.stack.imgur.com/lUhWO.jpg" alt="This is what&#39;s happening"></p>
  
  <p>This is <strong>what I want</strong> (Image is zoomed / cropped):</p>
  
  <p><img src="https://i.stack.imgur.com/8Je1E.jpg" alt="This is what I want"></p>
  
  <p><strong>Or this</strong> works, too (Image is 100% height, the width is relative):</p>
  
  <p><img src="https://i.stack.imgur.com/ukNXA.jpg" alt="this is fine too"></p>
  
  <p>Here is a fiddle I made with the problem: </p>
  
  <p><a href="http://jsfiddle.net/5bLac31h/5/" rel="nofollow noreferrer">http://jsfiddle.net/5bLac31h/5/</a></p>
  
  <p>And here's some css that I've been trying (and failing):</p>
  
  <pre><code>#cart_table
  {
      table-layout: auto;
  }
  
  .cart_image
  {
  
      height:80px;
      width:80px;
  
      max-width:80px; 
      max-height:80px; 
  }
  
  .cart_image img
  {
      width:100%;
      height:auto;
      max-height:100%;
      overflow:hidden;
      display: block;
  }
  </code></pre>
  
  <p>Thanks!</p>