Html 圆形图片相同宽度和高度自动缩放图像

我正在尝试创建一个卡片式结构，在这里我想显示图像和一些文本。
这是我的结果：

我喜欢大部分的结果，只是让我烦恼的是不是所有的图像都有这样的5rem x 5rem大小。
我如何解决这个问题？

卡img支架的宽度/高度似乎并不总是适合5x5


.card{
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
过渡：所有0.3立方贝塞尔（.25、.8、.25、1）；
填充：.5rem；
保证金：5雷姆；
弹性：10像素；
}
.卡img持有人{
宽度：5雷姆；
身高：5雷姆；
}
.卡img{
宽度：100%；
身高：100%；
对象匹配：包含；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
边界半径：50%；
}
.卡img名称{
填充：.5rem；
}
.卡img名称p：类型的第一个{
字号：1rem；
字体大小：粗体；
}

开玩笑

测试

反应

前端库

吉特

版本控制

尝试
对象匹配：封面用于
卡img会使项目无法查看。封面会考虑该比例并在侧面对其进行剪切（如果是横向或纵向，它不是正方形），您也可以使用对象位置，defaut为50%50%来选择要查看的部分（上下左右中心或%/px/…）