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

Question

我正在尝试创建一个类似卡片的结构，我想在其中显示图像和一些文本。
这是我的结果： 我喜欢大部分结果，只是让我感到困扰的是，并非所有图像都有这个 5rem x 5rem 大小。 我该如何解决这个问题？ 看起来，宽度/高度并不总是适合 5x5。



.card-img-holder

.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    padding: .5rem;
    margin: .5rem;
    flex: 1 1 0px;
}

.card-img-holder {
    width: 5rem;
    height: 5rem;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 50%;
}

.card-img-name {
    padding: .5rem;
}

.card-img-name p:first-of-type {
    font-size: 1rem;
    font-weight: bold;
}

<!-- Jest -->
<div class="card">
  <div class="flex-container centered">
    <div class="card-img-holder">
      <img src="https://picsum.photos/335/150" alt="Jest" class="card-img" />
    </div>
    <div class="card-img-name">
      <p>Jest</p>
      <p>Testing</p>
    </div>
  </div>
  <div>
    <a href="https://jestjs.io/">Website</a>
  </div>
</div>

<!-- React -->
<div class="card">
  <div class="flex-container centered">
    <div class="card-img-holder">
      <img src="https://picsum.photos/350" alt="React" class="card-img" />
    </div>
    <div class="card-img-name">
      <p>React</p>
      <p>Frontend Library</p>
    </div>
  </div>
  <div>
    <a href="https://reactjs.org/">Website</a>
  </div>
</div>

<!-- Git -->
<div class="card">
  <div class="flex-container centered">
    <div class="card-img-holder">
      <img src="https://picsum.photos/63/150" alt="Git" class="card-img" />
    </div>
    <div class="card-img-name">
      <p>Git</p>
      <p>Version Control</p>
    </div>
  </div>
  <div>
    <a href="https://git-scm.com/">Website</a>
  </div>
</div>