如何在 pug 文件/css 中创建圆形图像答案

【问题标题】：How to create circle image in pug file/css如何在 pug 文件/css 中创建圆形图像
【发布时间】：2019-01-16 17:06:08
【问题描述】：

我正在尝试制作圆形图像，但它一直显示为椭圆形。我让它作为一个圆圈工作的唯一方法是使用这个 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

【问题讨论】：

你需要用一个更大的方形图片开始，然后你50%的边框半径会做一个圆

标签： html css pug

【解决方案1】：

与其使用边界半径，不如在图像上使用剪辑路径？

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

【讨论】：

有效，但顶部和底部被略微切断了一些
然后将第一个值更改为 40%，看看是否效果更好。当您没有一致的原始图像大小时，就会出现问题。如果您所有的图像都是正方形，那么用它们制作圆圈会更容易。但有时我们没有时间或能力来编辑原件——因此诸如边界半径和剪辑路径之类的解决方案可以提供帮助。不过，它们并不完美。