title: How do I make an image take a DIV's full dimension?
body: <p>I've created a custom "product card" for my site, and I want the images to take the parent's full width and height, regardless of the image's dimensions. I have tried <code>max-width</code> <code>min-width</code> <code>max-height</code> <code>min-height</code> and none seem to work. I can't think of any other solution. I'm attaching an image of what I'd like and what I'm achieving now. </p>
  
  <p><a href="https://codepen.io/paulamourad/pen/MdxedG" rel="nofollow noreferrer">https://codepen.io/paulamourad/pen/MdxedG</a></p>
  
  <p><a href="https://i.stack.imgur.com/Mev0h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mev0h.png" alt="This is what I need"></a>
  <a href="https://i.stack.imgur.com/qyFVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qyFVP.png" alt="Don&#39;t want these white spaces"></a>
  <a href="https://i.stack.imgur.com/gPep4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gPep4.png" alt="Don&#39;t want these white spaces"></a></p>