title: Background-size: cover effect in HTML email
body: <p>I'm working on a newsletter for my photo community website. In the newsletter, I want to have a grid of images. Here's an unfinished rendering in an email client. As you can see it has problems, this is only to illustrate what I'm trying to build.</p>
  
  <p><img src="https://i.stack.imgur.com/xVMTJ.jpg" alt="enter image description here"></p>
  
  <p>The image files in reality are about twice the resolution as shown in the email. Furthermore, they can be in any aspect ratio and orientation. What I would like to achieve:</p>
  
  <ul>
  <li>Force all images into 200 x 200px cells</li>
  <li>Do not distort the image, the aspect ratio must be maintained</li>
  <li>The cell must always be filled, both horizontally and vertically</li>
  <li>Background sizing should be centered</li>
  <li>Elements must be clickable, leading to that particular photo</li>
  <li>Should be robust and work in most popular email clients</li>
  </ul>
  
  <p>In normal web technology (as opposed to HTML in email), this would be a matter of setting the image container to the fixed dimensions and using background-size: cover. I've learned about many HTML email limitations yet am trying to persist in finding one way or another. </p>
  
  <p>Am I really on an impossible mission here? </p>
  
  <p>What I've tried so far: </p>
  
  <ul>
  <li>Setting the image as a background on the a that wraps around the img tag. With some tweaks it can come to a reasonable result, yet centering is a problem and outlook.com does not show the images at all.</li>
  <li>Using normal img tags with "a" around it and trying to control max width and height on the image and its wrapper. Here too centering is the main problem</li>
  </ul>
  
  <p>I really hope this can be done, one way or another (not that server-side resizing is not an option in my case).</p>