在 css 圓圈內使用 svg 圖標

Question

我想創建一個圓圈，在該圓圈內我想在圓圈中間添加一個 svg 圖像。 所以我嘗試了這個：

 .treatment-methods__icons{ display:flex; flex-wrap: wrap; }.treatment-method__icon__container{ flex: 1 0 21%; margin: 5px; height: 100px; background-color: red; }.treatment-methods_icon{ vertical-align: middle; width: 80px; height: 80px; border-radius: 50%; color: #ffffff; }

 <section class="treatment-methods"> <div class="treatment-methods__icons"> <div class="treatment-method__icon__container"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> <div class="treatment-method__icon__container"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> <div class="treatment-method__icon__container"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> <div class="treatment-method__icon__container"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> </div> </section>

我的布局由 4 個對象組成，出於某種原因， border-radius: 50%不起作用，我們一直看到矩形，我做錯了什么？

Answer 1

有2個問題：

1. 您沒有在紅色矩形上設置邊框半徑，這就是為什么您一直看到矩形而不是圓形的原因。

2. 此外，要成為一個圓形，矩形需要在添加邊框半徑之前是方形的，當您使用 flex 並設置固定高度時，它不會是方形的。 如果它不是方形的，你會得到橢圓而不是圓形。

因此，您需要為紅色圓圈添加另一個容器並將其放置在flex容器中。 由於您的圖像具有固定的高度和寬度，您也可以在此容器上設置固定的高度和寬度以使其成為正方形。

你需要去掉border-radius: 50%; 從您的彈性容器（即處理方法__icon__container）中，並為新的外部 class 使用類似的東西：

.treatment-method__icon__outer_circle {
  background-color: red;
  /* Set the height & width to be the same, so the container is square */
  width: 80px;
  height: 80px;
  /* Add the border radius to round the corners */
  border-radius: 50%;
  /* Add padding around the image if required */
  padding: 10px;
}

新容器是 100 x 100px 正方形，因為我假設您想要圖像周圍空間的外部“邊框”，但是如果您希望它與圖像大小完全相同，則可以刪除填充。

我在下面添加了一個工作示例：

 .treatment-methods__icons { display: flex; flex-wrap: wrap; }.treatment-method__icon__container { flex: 1 0 21%; margin: 5px; height: 100px; }.treatment-method__icon__outer_circle { background-color: red; border-radius: 50%; width: 80px; height: 80px; padding: 10px; }.treatment-methods_icon { vertical-align: middle; width: 80px; height: 80px; border-radius: 50%; color: #ffffff; }

 <section class="treatment-methods"> <div class="treatment-methods__icons"> <div class="treatment-method__icon__container"> <div class="treatment-method__icon__outer_circle"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> </div> <div class="treatment-method__icon__container"> <div class="treatment-method__icon__outer_circle"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> </div> <div class="treatment-method__icon__container"> <div class="treatment-method__icon__outer_circle"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> </div> <div class="treatment-method__icon__container"> <div class="treatment-method__icon__outer_circle"> <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon"> </div> </div> </div> </section>

更新 - 在紅色圓圈中有一個非圓形圖像：

如果您不希望圖像也成為圓形（從您的問題中不清楚），您可以刪除border-radius: 50%; 也從中。 您還需要調整外圓容器的填充（或使圖像更小），使矩形圖像的角適合圓內。