title: How do I fit an image to a div?
body: <p>I have a problem with trying to fit an image into my div. My image is bigger than my div, so when I do the traditional </p>
  
  <pre><code> style="width:100%;"
  </code></pre>
  
  <p>it will resize the div, taking up more space than it should.</p>
  
  <p>I've tried using
      style="max-width:100%;" background-size: contain; background-size: cover;</p>
  
  <p>and pretty much all the methods of resizing the image to fit an entire div.</p>
  
  <p>I'm using CSS grid, and so the size of the area is how i'd like to keep the entire image to fit, but when using things like max-width it just changes the size of the area, making it bigger than what it should be</p>
  
  <p>I essentially want to do something like</p>
  
  <p><a href="https://i.gyazo.com/d6036a7397c1b55cbb408c1154a20301.jpg" rel="nofollow noreferrer">This example</a></p>
  
  <p>where the image would take up the entire div and not overflow</p>