title: CSS: keep aspect ratio when rendering an image
body: <p>a simple CSS problem:</p>
  
  <ul>
  <li>Display animal pictures in the grey box as shown in the picture below</li>
  <li>Image size must be 150x150 px</li>
  <li>However, I must maintain the aspect ration of the image, meaning not the whole of the image will fit into the 150x150 square.</li>
  <li>Since most of the images will exceed the allowed 150x150 dimensions, i would like to focus the display on the middle of the image.</li>
  </ul>
  
  <p><strong>Some HTML:</strong></p>
  
  <pre><code>&lt;div class="gallery-item" style="height: 232px;"&gt;
                      &lt;img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo "&gt;
  
                      &lt;div class="gallery-item-caption"&gt;
                          &lt;a href="/animals/african-buffalo" title="African Buffalo "&gt;African Buffalo &lt;/a&gt;
                      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Some CSS:</strong></p>
  
  <pre><code>.gallery-item {
  float: left;
  padding: 15px 15px 15px 15px;
  margin: 15px;
  background-color: #ececec;
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/MQdkY.png" alt="enter image description here"></p>