How to make an image cover parent container?

Question

How can I make an image scale-up, center, and cover the parent container (I use this style for the user profile picture)?

.container{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
}

.container img{
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <img src="https://www.bkacontent.com/wp-content/uploads/2020/10/Depositphotos_336730000_l-2015.jpg"> </img>  
</div>

Answer 1

You can add height:100% in your .container img

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}

.container{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
  background-color: aliceblue;
}

.container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 <div class="container">
      <img src="https://www.bkacontent.com/wp-content/uploads/2020/10/Depositphotos_336730000_l-2015.jpg"> </img>  
    </div>

Than if you want to change position of image inside the container, you can use object-position

.container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right -0.8rem top 0rem;
}