title: How to center and crop an image to always appear in square shape with CSS?
body: <p>I need to always crop a random-sized image to a square 160x160 using only CSS.
  The images should stay centered when cropped.</p>
  
  <p>My markup should be:</p>
  
  <pre><code>&lt;a href="#" class="cropper"&gt;
     &lt;img src="image" alt="description" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Searching on StackOverflow I've found some answers (such as <a href="https://stackoverflow.com/questions/17745559/css-how-to-crop-an-image-to-a-square-if-its-already-square-then-resize-it">CSS - How to crop an image to a square, if it's already square then resize it</a>), but they don't work for cases where your image can be larger horizontal (wide) <em>OR</em> vertical (tall).</p>
  
  <p>Specifically, I need to be able to present both a wide image like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HkGvg.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/HkGvg.jpg" alt="wide image"></a></p>
  
  <p>and a tall image like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Z1joN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Z1joN.jpg" alt="tall image"></a></p>
  
  <p>in square form, without knowing in advance which one is a horizontal rectangle or a vertical rectangle. It should also support already squared images.</p>