title: Containing image within div
body: <p>I have a logo image I'm attempting to responsively resize to fit within the container div. This is how I'm doing it, but the image extends vertically past the div's boundaries depending on the screen size.</p>
  <p>What am I doing wrong? Here's the live site.</p>
  <p><a href="https://stoic-snyder-620f18.netlify.app/" rel="nofollow noreferrer">https://stoic-snyder-620f18.netlify.app/</a></p>
  <pre><code>&lt;div id='app' style={{ height: '100vh', backgroundColor: 'pink', display: 'grid', gridTemplateRows: '15% 70% 15%' }}&gt;
      &lt;div id='header' style={{ height: '100%', backgroundColor: 'blue', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}&gt;
          &lt;div id='logo' style={{ width: '100%', backgroundColor: 'orange' }} &gt;
              &lt;img src={logo_image} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} /&gt;
          &lt;/div&gt;
          &lt;div id='title' style={{ width: '100%', backgroundColor: 'lime' }}&gt;
              Title
          &lt;/div&gt;
          &lt;div id='menu' style={{ width: '100%', backgroundColor: 'coral' }}&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='content' style={{ height: '100%', backgroundColor: 'teal' }}&gt;
      &lt;/div&gt;
      &lt;div id='footer' style={{ height: '100%', backgroundColor: 'grey', textAlign: 'center', marginTop: '0.25rem', marginBottom: '0.25rem' }}&gt;
          &lt;img src={fb_icon_image} style={{ height: '90%', display: 'inline-block' }} /&gt;
          &lt;img src={ig_icon_image} style={{ height: '90%', display: 'inline-block', marginLeft: '1rem', marginRight: '1rem' }} /&gt;
          &lt;img src={yt_icon_image} style={{ height: '90%', display: 'inline-block' }} /&gt;
      &lt;/div&gt;
      &lt;Global /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I also tried doing it as a background image, but this returns a broken link. Is this syntax wrong?</p>
  <pre><code>&lt;img alt='logo' style={{ maxWidth: '100%', maxHeight: '100%', backgroundSize: 'cover', display: 'block', backgroundImage: 'url(' + logo_image + ')', backgroundPosition: 'top' }} /&gt;
  </code></pre>