【问题标题】: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%) ; }

更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

【讨论】:

  • 有效,但顶部和底部被略微切断了一些
  • 然后将第一个值更改为 40%,看看是否效果更好。当您没有一致的原始图像大小时,就会出现问题。如果您所有的图像都是正方形,那么用它们制作圆圈会更容易。但有时我们没有时间或能力来编辑原件——因此诸如边界半径和剪辑路径之类的解决方案可以提供帮助。不过,它们并不完美。
猜你喜欢
  • 2012-12-13
  • 1970-01-01
  • 2023-03-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多