title: How to auto-resize a smaller image to fit a large div?
body: <p>I'm trying to fit a small image into a larger div.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
  
  height: 100%;
  width: 100%;
  }
  
  /*About Us Page*/
      .bgimage {
          width: 100%;
         height: 100%;
         position: relative;
      }
  
      img {
  
          max-width:100%;
          max-height:100%;
      }
  
      #aboutus {
          width: 250px;
          height: 250px;
          background-color: rgb(82, 63, 51);
          
          position: absolute;
          top:0;
          bottom: 0;
          left: 0;
          right: 0;
          border-style: groove;
          border-color: rgb(75, 58, 36);
          border-width: 20px;
          
  
          margin: auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt; 
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;The Hewitt's Den: About Us&lt;/title&gt;
          
          &lt;style&gt;
            
  #aboutus {
  
    text-align: center;
  }
  
          &lt;/style&gt;
        &lt;/head&gt;
   &lt;body&gt;
  
  &lt;div class="bgimage"&gt;
        &lt;div class="navi"&gt;
          &lt;img class="AboutUsPic" src="https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&amp;ext=jpg"&gt;
        &lt;/div&gt;
        &lt;div id="aboutus"&gt;
  &lt;h1&gt;About Us:&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
   &lt;/body&gt;
          &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The image is too small to fit into the div, I could manually change the size of the image, but I want it to automatically fit, to accommodate other screen sizes. If it's possible, maybe it could maintain it's width-height size, to avoid looking stretched or compressed.</p>