Как создать изображение круга в файле pug / css - PullRequest
Новая
       9

Как создать изображение круга в файле pug / css

0 голосов
/ 16 января 2019

Я пытаюсь сделать изображение круга, но оно продолжает отображаться как овал.Единственный способ заставить его работать кругом - использовать этот код CSS: 

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

Однако это выглядит слишком маленьким и также не центрируется.Пример здесь: enter image description here

Используя этот код CSS, я получаю большую эллиптическую форму: 

.teamImage {
 border-radius: 50%;
   }

enter image description here

Я хочу, чтобы оно выглядело как второе изображение, по длине / высоте, но в форме идеального круга.

Это из файла .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

1 Ответ

0 голосов
/ 16 января 2019

Вместо использования радиуса границы, как насчет использования пути обрезки над изображением? 

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

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

...