CSS Круг DIV с фоном не в масштабе 1: 1 - PullRequest
Новая
       10

CSS Круг DIV с фоном не в масштабе 1: 1

1 голос
/ 15 февраля 2020

Я хочу сделать сборщик языков для моего сайта Ху go, и я нахожу эту полезную библиотеку: https://www.phoca.cz/cssflags/, которая дает чистый svg и css весь флаг мира. Теперь я создайте мое собственное подмножество флагов, и в файле css каждый флаг имеет что-то вроде этого: 

/* europe */
.eu {
 background: url('data:image/svg+xml;base64, BUNCH OF DATA);
 width: 150%;
 height: 100%;
 background-size: 100% 100%;
}

Ширина и высота могут быть не одинаковыми ... так что некоторый флаг имеет 150% ширины и 100% по высоте и кому-то другому. Чего я хочу добиться, так это идеального круга с диаметром около 30 пикселей в центре флага. Я пытаюсь этот код: 

<div class="u-language">
            <a href="#" id="language-bar-invoker" class="u-icon-v1>
              <i class="eu g-rounded-20"></i>
            </a>
</div>

И класс G-закругленный имеет этот код: 

.g-rounded-20 {
    border-radius: 20px!important;
}

, но в результате получается овал, а не круг! Как я могу решить это?

Спасибо

1 Ответ

2 голосов
/ 15 февраля 2020

Чтобы получить идеальный круг диаметром 30px с флагом в центре: 

#language-bar-invoker i {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #eee;
  background-position: center center;
  background-size: 150%;
}

.eu {
  background-image: url(https://c.tadst.com/gfx/750w/flag-day.jpg);
}
<div class="u-language">
    <a href="#" id="language-bar-invoker" class="u-icon-v1">
      <i class="eu"></i>
    </a>
</div>

Чтобы получить круг, убедитесь, что height и width равны. Помните, что высота может быть установлена ​​только для элементов block и inline-block. Затем установите border-radius на 50%.

...