title: CSS property to fill parent div with image, centered, and change size to fill parent
body: <p>I have the following website, where a parent div that scales dynamically with browser size contains a child div with an image. The desired effect is as follows: <a href="https://shibori-demo.squarespace.com/workshops-shibori/" rel="nofollow noreferrer">https://shibori-demo.squarespace.com/workshops-shibori/</a></p>
  
  <p>My <code>pug</code> code is as follows: </p>
  
  <pre><code>article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday
      a.eventlist-column-thumbnail.content-fill(href=`${link}`)
  
  
          img(src=`${img_src}`, alt=`${img_src}`
             , style='position: static; float:left; width: 100%; object-fit: contain'
             )
  </code></pre>
  
  <p>This code achieves the following effect (the parent div is red for effect): <a href="https://lingxiaoling-1.appspot.com/code" rel="nofollow noreferrer">https://lingxiaoling-1.appspot.com/code</a>.</p>
  
  <p>Some examples:</p>
  
  <p><img src="https://i.imgur.com/piOhpSm.png" alt="bad-1.png"></p>
  
  <p><img src="https://i.imgur.com/OesKekB.png" alt="bad-2.png"></p>
  
  <p>In conclusion I would like the images to be:
  1. centered relative to the parent div
  2. resize according to the size of the parent div so that it fills the parent div
  3. does not overflow the parent div. </p>