如何在Pug文件/ CSS中创建圆圈图像

Question

我正在尝试制作圆形图像，但它一直显示为椭圆形。使它成为圆圈的唯一方法是使用以下CSS代码：

.teamImage {
 border-radius: 50px;
 width: 50px;
 height: 50px;}

但是，它显示得太小并且也没有居中。此处的示例：

使用此CSS代码，我得到一个大的椭圆形：

.teamImage {
 border-radius: 50%;
   }

我希望它看起来像第二幅图像，长度/高度明智，但要是一个完美的圆形。

这是来自.pug文件：

    .columns
      .column.is-one-third
        .card
          img(src='../images/team1.jpg', class="teamImage")
          .h3.is-3.title Jane Doe
          .p.title CEO & Founder
          .p Some example Text
          .button Contact

Answer 1

而不是使用边界半径，在图像上使用剪切路径怎么样？

.teamImage { clip-path: circle(50% at 50% 50%) ; }

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path