包含图像的响应CSS circle 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/@chrismager/center-and-crop图像-带有单行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>