如何将img融入div圈？

Question

我是HTML / CSS的初学者。

我创建了一个看似圆圈的div。我想将Facebook图像放入该圆圈，但作为圆形徽标。

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

基本上有两种方法可以达到这个目的。

1. 您可以将border-radius: 50%;添加到img元素。
2. 您可以将overflow: hidden;添加到div元素。

两者都有效。您应该删除“Facebook”字符串以正确定位图像。

Answer 2

你非常接近。 DIV的文本内容“facebook”占据了空间，需要删除。如果图像不可用，则可以使用alt文本替换它，并使用通常显示为工具提示的title属性。 IMG元素不需要高度和宽度，因为它在CSS中指定：

<div class="social" id="social1">
  <a href="https://www.facebook.com">
     <img src="https://www.facebook.com/images/fb_icon_325x325.png"
      alt="facebood" title="facebook"> 
  </a>
</div>

除此之外，您只需添加overflow: hidden作为div CSS的属性

或者，如果你想支持IE和Edge（来自@Blazemonger的评论）不支持object-fit，你可以添加图像作为DIV的背景附件，并使DIV本身成为链接元素的内容（没有alt文本选项）：

HTML

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

并包含

background-image: url("https://www.facebook.com/images/fb_icon_325x325.png");
background-size: cover;
overflow:hidden;

CSS中的

表示div元素。

Answer 3

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以在CSS中设置边框半径以对图像进行舍入，如下所示：

img {
 width: 100%;
 height : 100%;
 object-fit: contain;
 border-radius: 999px;
}

示例：http://codepen.io/JasonGraham/pen/zBGYgx

Answer 5

你可以这样做：

div {
  display: inline-block;
  margin-left: 55px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
  text-align: center;
  background: url("https://www.facebook.com/images/fb_icon_325x325.png") center no-repeat;
  background-size: cover
}

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

Answer 6

img{
border-radius: 100%;
object-fit:cover
}

这将定位图像，使其显示居中并裁剪并绕其边缘。

Answer 7

将border-radius:100%添加到您的img css代码段。

img {
     width: 100%;
     height : 100%;
     border-radius:100%;
}

Answer 8

overflow:hidden; + position:relative / absolute不介意文字旁边的图片：

＆＃13;

＆＃13;

div {
  display: inline-block;
  margin-left: 55px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
  text-align: center;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;