CSS 圆 DIV 背景不按比例 1:1

Question

我想为我的 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>

而class g-rounded 有这个代码：

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

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

谢谢

Answer 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%。

CSS 圆 DIV 背景不按比例 1:1

CSS Circle DIV with a background not in scale 1:1

html

css

svg

hugo