CSS：如何使 div 适应图像大小？答案

【问题标题】：CSS: How to make div adapt to image size?CSS：如何使 div 适应图像大小？
【发布时间】：2021-07-29 21:53:01
【问题描述】：

我已经实现了允许查看用户是否在线的 CSS 状态：

这是 CSS 代码：

.status-circle-online {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 2px solid white;
  bottom: 10px;
  right: 10px;
  position: absolute;
}

这是html代码：

  <div>
    <img
      src={profileImageSrc}
      className="rounded-circle ml-3"
    />
    <div
      className={`status-circle-${online_or_offline_signal} cursor-pointer`}
    />
  </div>

问题是当我减小窗口大小时，状态信号不再是它应该在的位置：

知道如何让它“粘”在图像上吗？

【问题讨论】：

位置：相对于其父级

标签： html css reactjs bootstrap-4 sass

【解决方案1】：

如果没有看到更多代码，很难准确地说出来。但是您可以尝试将position: relative; 添加到包含的 div 中，然后对于红色圆圈，使用百分比而不是 right 和 bottom 的像素。

【讨论】：

【解决方案2】：

定位父 div relative，然后状态指示器的绝对值将相对于该容器：

.status-photo {
  position: relative;
  width: 100px;
  height: 100px;
}

.status-photo img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}

.status-photo .status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 2px solid white;
  bottom: 0;
  right: 10px;
  position: absolute;
}

<div class="status-photo">
  <img
    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  />
  <div
    class="status"
  />
</div>

【讨论】：

【解决方案3】：

上面的答案很有帮助。但是，一种更具响应性的方法是根据用户百分比：

.status-photo {
  display: block;
  position: relative;
  width: auto;
  height: auto;
}

.status-photo img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}

.status-photo .status-online {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 1px solid white;
  bottom: 0%;
  right: 0%;
  position: absolute;
}

【讨论】：