背景不按比例 1:1 的 CSS Circle DIV

Question

我想為我的 Hugo 網站制作一個語言選擇器，我發現這個有用的庫： https ://www.phoca.cz/cssflags/ 提供純 svg 和 css 世界所有標志現在我創建了我自己的子集flag 並且在 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;
}

但結果是橢圓形而不是圓形！ 我該如何解決？

謝謝

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