How to completely fill a circle with a photo? - html

Question

I want the avatar to fill the entire circle. it should be increased, but I do not know how.
Do position: absolute and remont, its position left top, but she's out of the circle.
.photo {
display: inline-block;
width: 62px;
height: 62px;
box-sizing: border-box;
background: #f5f4f7;
border-radius: 50%;
margin-right: 17px;
padding-top: 5px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.photo img {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: 100%;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
<div class="photo">
<img src="https://i.pinimg.com/originals/bc/33/b5/bc33b5e3f3604819db0e4ca66a989c9e.jpg">
</div>

Answer 1

A simplified version:
.photo {
display: inline-block;
width: 62px;
height: 62px;
box-sizing: border-box;
background: #f5f4f7;
border-radius: 50%;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.photo img {
display: block;
width: 100%;
height: auto;
transform: translateY(-50%); /*center photo*/
margin-top: 50%; /*vertically with these 2 lines*/
}
<div class="photo">
<img src="https://i.pinimg.com/originals/bc/33/b5/bc33b5e3f3604819db0e4ca66a989c9e.jpg">
</div>

Answer 2

Try setting the image as a background as shown:
.photo {
display: inline-block;
width: 62px;
height: 62px;
box-sizing: border-box;
background: #f5f4f7;
border-radius: 50%;
margin-right: 17px;
padding-top: 5px;
overflow: hidden;
background: url(https://i.pinimg.com/originals/bc/33/b5/bc33b5e3f3604819db0e4ca66a989c9e.jpg) no-repeat center;
background-size: cover;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="photo">
</div>

Answer 3

1. Remove padding-top: 5px; from .photo.
2. Remove everything from .photo img except height and width.
.photo {
display: inline-block;
width: 62px;
height: 62px;
box-sizing: border-box;
background: #f5f4f7;
border-radius: 50%;
margin-right: 17px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.photo img {
width: 100%;
height: 100%;
}
<div class="photo">
<img src="https://i.pinimg.com/originals/bc/33/b5/bc33b5e3f3604819db0e4ca66a989c9e.jpg">
</div>