CSS Circle DIV，背景不是 1:1答案

【问题标题】：CSS Circle DIV with a background not in scale 1:1CSS Circle DIV，背景不是 1:1
【发布时间】：2020-04-16 12:06:13
【问题描述】：

我想为我的 Hugo 网站制作一个语言选择器，我发现这个有用的库：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%，而其他标志则不同。我想要实现的是直径约 30px 的完美圆形 div，中心是标志。我试试这段代码：

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

而 g-rounded 类有这样的代码：

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

但结果是椭圆形而不是圆形！我该如何解决？

谢谢

【问题讨论】：

标签： html css svg hugo

【解决方案1】：

要实现一个直径为 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%。

【讨论】：