Question

我正在尝试创建带有圆形在线状态指示器的圆形头像图像。结果是： https://jsfiddle.net/65g28jnb/

如您所见，我将头像图像作为“ cbig”容器的背景，但与此相反，我想使用如下内容：

<img class="cbig" src="avatar.jpg" />
<div class="csmall"></div>

这样我就不必将图像作为背景了。有人可以帮忙吗？

<div class="cbig">
  <div class="csmall"></div>
</div>

<div class="cbig" style="
background-image: url(https://www.w3schools.com/howto/img_avatar2.png);background-size:cover";>
  <div class="csmall"></div>
</div>


.cbig {
  position: relative;
  width: 50vh;
  height: 50vh;
  background-color: lightblue;
  border-radius: 50%;
  margin: 5%;
}
.csmall {
  position: absolute;
  bottom: -5%;
  right: 5%;
  width: 20%;
  height: 20%;
  background-color: #99CC00;
  border: 2px solid white;
  border-radius: 50%;
}

Answer 1

这里是一个示例，说明如何使用<img>标记而不是嵌入式背景图像来模拟此情况。

窍门是使用object-fit:cover;来保持图像的正确比例，即使四舍五入。

.c-avatar {
  position:relative;
  display:inline-block;
}
.c-avatar__image {
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:100%;
}
.c-avatar__status {
  width:25px;
  height:25px;
  background:#99CC00;
  border:2px solid white;
  position:absolute;
  bottom:2%;
  right:2%;
  border-radius:100%;
}

<div class='c-avatar'>
  <img class='c-avatar__image' src='https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' alt=''>
  <span class='c-avatar__status'></span>
</div>

将圆形在线指示器放置在圆形的头像图像上

1 个答案: