时间戳

首页 > 解决方案 > CSS Circle DIV，背景不是 1:1

html - CSS Circle DIV，背景不是 1:1

问题描述

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

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

谢谢

标签： htmlcsssvghugo

解决方案

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

推荐阅读