title: How can I make images fit into a 200 pixel square box using CSS?
body: <p>I have a bunch of images which all fit into a 400px × 400px box (that is, one of their dimensions is 400px and the other is smaller). I would like to be able to, using CSS, but jquery/javascript if necessary, fit that image to a 200px by 200px box, so that two edges of the image touch the box, and there is a gap between the other two edges of the box.
  Aspect ratio must be maintained.</p>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>&lt;div class="small"&gt;
      &lt;img src="/images/photos/View.jpg" alt="View" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS is:</p>
  
  <pre><code>div.images div.small
  {
      width:200px;
      height:200px;
      line-height:200px;
      text-align:center;
  }
  div.images div.small img
  {
      vertical-align:middle;
      max-width:200px;
      max-height:200px;
  }
  </code></pre>
  
  <p>You can see a sample <a href="http://www.fifteenthedigey.co.uk/home" rel="noreferrer">here</a>.</p>
  
  <p>Unfortunately, my landscape images hug the top of the box, whereas I would like them to be centered. Also, I'm not sure of the wisenees of relying upon <code>max-width</code>/<code>max-height</code>.</p>
  
  <p>How can I center my images within these boxes?</p>