How to auto-resize a smaller image to fit a large div?-CodePudding

I'm trying to fit a small image into a larger div.

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;
    }

<html> 
    <head>
        <meta charset="UTF-8">
        <title>The Hewitt's Den: About Us</title>
        
        <style>
          
#aboutus {

  text-align: center;
}

        </style>
      </head>
 <body>

<div class="bgimage">
      <div class="navi">
        <img class="AboutUsPic" src="https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&ext=jpg">
      </div>
      <div id="aboutus">
<h1>About Us:</h1>
      </div>
    </div> 
 </body>
        </html>

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.

CodePudding user response：

CSS background-image background-size: cover

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

CodePudding user response：

You should use property width: 100% for image element like this:

img {
    width: 100%
}

CodePudding user response：

For img elements use object-fit: cover and in your case like this:

img {
  width: 100%;
  /* max-width: 100%; */
  max-height: 100%;
  object-fit: cover;
}

object-fit only works if you make the img element capture the full dimensions first - full width of its parent div in this case.

Working codesandbox