How can i fit the image into the container?

The HTMl Code
`

キラークイーン

Kira Yoshikage

MofuMofu

`

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  width: 100%;
  height: 100vh;
}

.container{
  position:relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

main{
  border: 1px solid black;
  width:100%;
  height:100vh;
}

.image-wrapper{
  height:100vh;
  width:100%; 
  border: 1px solid black;
  background: url(https://images.unsplash.com/photo-1584281180515-088ad65f3be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80) no-repeat;
}
  
img{
  max-width:100%;
  max-height:100vh;
  display:block;
}

Did you try the object-fit property?
More information about it: https://www.w3schools.com/css/css3_object-fit.asp

oh oky i will try it , thanks!