CSS : border-radiusで完全な円形にならない（楕円形になってしまう）

Question

border-radiusを使用して、プロフィール画像を円形にしたいのですが、添付写真の様に、楕円形になってしまいます。コードの誤りをご指摘頂けますと助かります。

.icon{
  max-width: 5rem;
  max-height: 5rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<div class="icon-container">
      <%= user_icon_tag @user, :alt => "avatar", :class => "icon" %>
    </div>

Answer 1

原因は画像の縦横比が違うからですね。
正方形の画像であればそれで丸くなるんですが、比率が違う場合は背景画像としてしまいましょう。

.bg_icon {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background-image: url("img/img.png");
	background-size: cover;
	background-position: center center;
}

<div class="bg_icon"></div>

Comments

[gin]

アイコンを横並びにしたりテキストを記述する場合には「display: inline-block;」を追加してください。

[innjera]

完璧にやりたい様にできました！有難う御座います。
ちなみに、この画像をレスポンシブにするにはどうしたら良いのでしょうか？　
今の状態だと、webブラウザのサイズを変更しても画像のサイズは変更されませんでした

[gin]

分かりやすく固定値にしただけなので、
-------
max-width: 5rem;
max-height: 5rem;
-------
を追加でいけると思います～

あと思ったんですが、div要素じゃなくi要素のほうがいいですね。「display:inline-block;」は必須。
-------
<i class="bg_icon"></i>
-------

[innjera]

早速コメント有難う御座います！大変助かりました。

Answer 2

楕円形になるのは、画像のwidthとheightに対してborder-radiusがそれぞれの50%でかかっているためです。
画像のwidthとheightを揃えれば(画像が正方形であれば)、そのままのコードで正円を作ることができます。

Comments

[innjera]

border-radiusの原則を理解してませんでした、、有難う御座います！

Answer 3

では別の方法を。

.icon-container {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.icon {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="icon-container"><img class="icon" src="https://placehold.jp/24/cc9999/993333/525x250.png" alt=""></div>
```**動くサンプル：**[https://jsfiddle.net/am9Lpnu9/](https://jsfiddle.net/am9Lpnu9/)

Comments

[innjera]

有難う御座います！とっても見た目のカッコよいコードになりました！