包含图像的响应式 CSS 圆形 div 的问题

Question

我在连续创建 9 个响应式 CSS 圆圈时遇到问题，其中每个圆圈内部都包含一个 img 标签（不是背景图像）。 img 将根据父圆 div 的大小居中和调整大小。这 9 个圆圈连续显示并包含在一个网格容器内，每个圆圈都分配给它自己的单元格。这 9 个（数字 5）的中心是其他圆圈的两倍。

对于我较小的圆形容器，我使用以下 CSS：

border: blue 1px solid;
border-radius: 50%;
width: 100%;
height: 0%;
padding-top: 100%;
margin:auto;
overflow: hidden;

这是基于我在网上找到的各种教程和其他堆栈溢出帖子中的建议。

img 标签的 CSS 如下：

width: 100%;
height: 100%;
object-fit: cover;

此处基于本教程：https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

图像未显示 - 我相信是因为圆形容器中的填充。但是我不知道如何改变这一点。如果我删除填充并改为向容器添加高度，它们将保持圆形并且图像按预期显示，但它们不再响应 - 这意味着如果页面大小发生变化，它们会变为椭圆形。

这里是有问题的组件：https://jsfiddle.net/jth3rb6m/

Answer 1

图片不是圆形的问题是由于图片不是方形的。

.friend-cont {
  display: grid;
  justify-content: space-around;
  grid-template-columns: calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(20% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px);
  grid-column-gap: 5px;
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
}

.friend-pic {
  border: blue 1px solid;
  border-radius: 50%;
  width: 100%;
  height: auto;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

.friend-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-pic {
  border: blue 1px solid;
  border-radius: 50%;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

<div class="friend-cont">

  <div class="profile-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

</div>