title: Can you use display: table-cell and have a fixed width/height?
body: <p>I have the following:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.photo {
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 100px;
  }
  </code></pre>
  
  <p><strong>HAML</strong></p>
  
  <pre><code>.photo
    %img{:src =&gt; my_url}
  </code></pre>
  
  <p>See the jsFiddle <a href="http://jsfiddle.net/VMQJG/1/" rel="noreferrer">here</a>. The image I used to demonstrate is 150px by 80px.</p>
  
  <p>I need to display the image inside the <code>.photo</code> div and crop off any excess. The image needs to be centered vertically and horizontally. However, <code>display:table-cell</code> causes the <code>.photo</code> div to ignore my width and height settings. How can I get around this?</p>