title: Contain variable size images within box, maintain proportions, fill box
body: <p>Im listing images in landscape 10:7 and portrait 7:10 in a grid.</p>
  
  <p>The images all have these proportions, but some are small and some are big.</p>
  
  <p>I want to list them in a grid 3 images wide and I want all images to be displayed at the same size. It is important that I maintain the proportions. The images also have a css border.</p>
  
  <p><a href="https://i.stack.imgur.com/gzGre.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gzGre.png" alt="the target"></a></p>
  
  <p>I have a solution using the padding-bottom trick where I set the <strong>a</strong> tag to be square and then absolute position the <strong>img</strong> inside it. This works but when the images are small, they wont scale up. If I set the width or height of the image, the proportions are screwed up.</p>
  
  <p>The first two images are too small and does not fill the box:
  <a href="https://i.stack.imgur.com/4PSDE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4PSDE.png" alt="The first two images are too small and does not fill the box"></a></p>
  
  <p>The html is generated for me (I cant change it) and looks as follows: </p>
  
  <pre><code>&lt;li&gt;
    &lt;a&gt;
      &lt;img srcset=""&gt;
    &lt;/a&gt;
  
    other stuff like title and description
  &lt;/li&gt;
  </code></pre>
  
  <p>I also tried using object-fit to contain the images within the square <strong>a</strong> tag - this does not work for me because the images have a css border applied to them, this border would then become square.</p>