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

画像を丸く切り抜く方法|CSS CSS
この記事は約5分で読めます。
スポンサーリンク

TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。
やりかたは2種類あり、自分は2つ目が好みでよく使用しています。
1つめは、下記のみたいに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は「2」と変わらずですが、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.

SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLjavascriptjQueryサイト制作未分類

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました