background-imageで表示した画像にborder-radius:50%をかけたい

前提・実現したいこと

background-imageで表示した画像にborder-radius:50%をかけたいのですが、うまい具合に丸くなりません

絶対条件としてbackground-sizeはcontainであること
width、heightは%のみを指定できることです

出力結果は<img src="https://www.seo-pro.jp/seo/wp-content/uploads/2019/05/eycatch-2.jpg" style="border-radius:50%">と同じ状態にしたいです

該当のソースコード

HTML
1<div style="width:10%;height:10%;">
2<div style="width:150%;height:150%;background:transparent url('https://www.seo-pro.jp/seo/wp-content/uploads/2019/05/eycatch-2.jpg') no-repeat center;background-size:contain;border-radius:50%">
3</div>
4</div>

行動規範の内容に同意します

回答1件

ベストアンサー

うまい具合に丸くなりません

上記、正円にしたい、楕円はNGなのだと解釈しました。

<div style="width:10%;height:10%;">
↑だと、親要素が正方形でないと正円 (正方形) は描画できません。

<div style="width:200px;height:200px;">
というように、「%」指定でない書き方をすると、とりあえず正円になると思います。

HTML
1<div style="width:200px;height:200px;"><!--変更-->
2  <div style="width:150%;height:150%;background:transparent url('https://www.seo-pro.jp/seo/wp-content/uploads/2019/05/eycatch-2.jpg') no-repeat center;background-size:contain;border-radius:50%">
3  </div>
4</div>

また、画像の上下か、画像の左右に"不要な余白"がでてしまうと感じるのであれば

background-size:contain;ではなく
background-size:cover;にすると、"不要な余白"が消えると思います。

投稿2020/05/11 23:55

編集2020/05/12 00:01