如何用CSS实现围绕图片的圆形Div容器？

我正在用CSS设计Logo，需要让一个圆形环绕一张透明PNG图片。

我已通过以下代码实现了预期效果：

<img id="desired" src="https://via.placeholder.com/550">

<style>
img#desired {
  width: 10%;
  background-color: red;
  border-radius: 80px;
  display: block;
}
</style>

预期效果：

但需求要求由外层Div而非图片本身生成圆形，我目前的代码如下：

<div>
  <img id="actual" src="https://via.placeholder.com/550">
</div>

<style>
div {
  background-color: red;
  border-radius: 80px;
  display: inline-block;
  padding: 20px;
}
#actual {
  display: block;
  width: 20%;
}
</style>

当前效果：

请问如何修改第二种实现方式，使其效果与第一种一致？

要让外层div实现和第一种方案一致的圆形环绕效果，调整以下几点即可：

核心修改思路 #

1. 用border-radius: 50%替代固定像素值，确保元素始终是正圆形，避免尺寸变化时变成椭圆；
2. 统一外层容器和图片的尺寸比例，让容器大小和第一种方案的整体视觉尺寸匹配；
3. 控制容器内的布局，让图片完全适配圆形容器。

基础匹配版代码 #

如果要完全复刻第一种方案的视觉效果，修改后代码如下：

<div class="logo-wrap">
  <img id="actual" src="https://via.placeholder.com/550">
</div>

<style>
.logo-wrap {
  background-color: red;
  border-radius: 50%; /* 确保正圆形 */
  display: block;
  width: 10%; /* 和第一种方案的图片宽度保持一致 */
  overflow: hidden; /* 裁剪图片超出圆形的部分 */
}
#actual {
  width: 100%; /* 图片占满容器内部 */
  display: block;
}
</style>

带边框效果版代码 #

如果需要让红色部分是环绕图片的边框（而非图片背景），可以调整padding并配合box-sizing来实现：

<div class="logo-wrap">
  <img id="actual" src="https://via.placeholder.com/550">
</div>

<style>
.logo-wrap {
  background-color: red;
  border-radius: 50%;
  display: block;
  width: 10%;
  padding: 5%; /* 控制红色边框的厚度，按需调整 */
  box-sizing: border-box; /* 让padding包含在容器宽度内，保证整体尺寸不变 */
}
#actual {
  width: 100%;
  display: block;
  border-radius: 50%; /* 若图片非透明，给图片加圆角匹配容器 */
}
</style>

内容的提问来源于stack exchange，提问作者penu