CODEWITHSUNDEEP
htmlcss
evans
evans

Reputation: 563

How to completely fill a circle with a photo?

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>

Upvotes: 1

Views: 86

Answers (3)

Razvan Zamfir
Razvan Zamfir

Reputation: 4614

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>

Upvotes: 3

gyordanoff
gyordanoff

Reputation: 135

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>

Upvotes: 0

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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>

Upvotes: 2

Related Questions