How to fit img into div circle ?

Question

I'm beginner in HTML/CSS.

I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.

HTML

<div class="social" id="social1"> Facebook
  <a href="www.facebook.com">
    <img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106"/> 
     </a>
</div>

CSS

div {
     display: inline-block;
     margin-left: 55px;
     height: 100px;
     width: 100px;
     border-radius: 100%;
     border: 2px solid black;
     text-align:center;
   }

img {
     width: 100%;
     height : 100%;
     object-fit: contain;
    }

How to fit img into div circle ?

Answer 1

.social .facebook {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url(https://www.facebook.com/images/fb_icon_325x325.png);
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 50%;
}

<div class="social" id="social1">
  <a class="facebook" href="https://www.facebook.com/"></a>
</div>

Answer 2

Basically there are two ways to achieve this.

1. You could add border-radius: 50%; to the img element.
2. You could add overflow: hidden; to the div element.

Both will work. You should remove the "Facebook" string to get proper positioning of the image.