画像を丸く切り抜く方法｜CSS

TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。
やりかたは2種類あり、自分は2つ目が好みでよく使用しています。
１つめは、下記のみたいにHTMLでimgタグで画像を表示し周りを切る方法。

HTMLのimg要素で画像を配置する場合

HTMLで画像を配置する場合は、親要素となるdivの高さと幅を決めておき、border-radiusを50%で設定すると丸くなります。
最後にoverflow:hiddenではみ出た箇所を非表示にします。
高さと幅が同じサイズでないと楕円になってしまいます。
例えば幅を％で指定してあると、高さを幅と一緒にするには、javascriptが必要になってきます。

【HTML】

<div id="circle-img">
  <img src="img.jpg" alt="円形画像" />
</div>

【CSS】

#circle-img {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow:hidden;
}
#circle-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

Demo

See the Pen
円形画像 by endebataro (@endebataro)
on CodePen.

CSSのバックグラウンドに画像を指定する場合

こちらの記述のほうが断然シンプルでキレイに書けます。
こちらも高さと幅のサイズが一緒でないと楕円になってしまします。

【HTML】

<div id="circle-img"></div>

【CSS】

#circle-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow:hidden;
  background:url(https://hajimete.org/wp-content/uploads/2019/07/imggg.jpg);
  background-position: center;
  background-size: auto 100%;
}

Demo

See the Pen
CSSのbackgroundで円形画像 by endebataro (@endebataro)
on CodePen.

幅を％指定した時に、画像を丸く切り抜く方法

どうしてもピクセル指定ができない時、jQueryで幅を取得して高さに代入する方法です。
HTMLは「２」と変わらずですが、CSSは幅を70%に指定し、高さをautoにしています。
そこにjQueryを利用して高さを代入しています。

【HTML】

<div id="circle-img"></div>

【CSS】

#circle-img {
  width: 70%;
  height: auto;
  border-radius: 50%;
  overflow:hidden;
  background:url(https://hajimete.org/wp-content/uploads/2019/07/imggg.jpg);
  background-position: center;
  background-size: auto 100%;
}

【jQuery】

$(function() {
  var div = $("#circle-img");
  var width = div.width();
  div.css({height: width});
});

Demo

See the Pen
幅を％指定した時に、画像を丸く切り抜く方法 by endebataro (@endebataro)
on CodePen.

幅を％指定した時に、画像を丸く切り抜く方法（ウィンドウサイズの可変対応）

上のソースだと、読み込み時のウィンドウサイズをもとに高さを代入しているので、ウィンドウサイズが変更された時に対処できません。
なので、読み込み時とウィンドウサイズ変更後に幅を取得し高さに代入したいと思います。

【HTML】

<div id="circle-img"></div>

【CSS】

#circle-img {
  width: 70%;
  height: auto;
  border-radius: 50%;
  overflow:hidden;
  background:url(https://hajimete.org/wp-content/uploads/2019/07/imggg.jpg);
  background-position: center;
  background-size: auto 100%;
}

【jQuery】

$(function() {
  imgheight();
});
$(window).on("resize", imgheight());

function imgheight() {
  var div = $("#circle-img");
  var width = div.width();
  div.css({height: width});
}

Demo

See the Pen
幅を％指定した時に、画像を丸く切り抜く方法（ウィンドウサイズの可変対応） by endebataro (@endebataro)
on CodePen.