[CSS]画像を丸く切り取る方法 コピー&ペーストで超簡単

[CSS]画像を丸く切り取る方法 コピー&ペーストで超簡単

目的

CSSを使って画像を丸く切り取ります。
今回はこの画像を使います。

三ツ矢サイダー梅

実際のサイズは、縦、横、2000px 以上の大きな画像です。
この大きな画像を200pxの正円で表示します。

画像を丸く切り取る場合のCSS

img {
	width:200px;
	height:200px;
	object-fit:cover;
	border-radius:50%;
}

[動作デモ]
上記CSSの設定値(プロパティ、バリュー)は「style」の中に記載しています。
再生ボタンのクリックで表示結果を見ることができます。

<img src="https://www.iotoon.com/wp-content/uploads/2020/06/mitsuya_ume_soda.png" alt="" class="creators_profile"
style="
width:200px;
height:200px;
object-fit:cover;
border-radius:50%;         
">

 

切り取った画像の位置を調整したい場合はobject-positionをつかう

img {
	width:200px;
	height:200px;
	object-fit:cover;
	border-radius:50%;
	object-position:0px 0px;
}

[動作デモ]
「object-position:-150px 0px;」
-150pxと書くことで、画像の表示位置を左に150px移動しています。
再生ボタンのクリックで表示結果を見ることができます。

<img src="https://www.iotoon.com/wp-content/uploads/2020/06/mitsuya_ume_soda.png" alt="" class="creators_profile"
style="
width:200px;
height:200px;
object-fit:cover;
border-radius:50%;
object-position:-150px 0px;
">

 

まとめ

・切り取るサイズの「width」と「height」は同じ値
・「object-fit:cover;」で長い画像の必要な部分だけを表示
・画像を正円にするために「border-radius:50%;」を設定
・画像のトリミング位置は「object-position:(左から)px (上から)px;」で調整