javascript - 如何将图像放入 div 圈？

Question

我是 HTML/CSS 的初学者。

我创建了一些看起来像圆圈的 div。我想将 facebook 图像放入该圆圈中，但作为圆圈 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;
    }

如何将 img 放入 div 圈中？

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>