［CSS］画像を丸く切り取る方法 コピー＆ペーストで超簡単
2020年10月1日 配信
目的
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;」で調整
コメント
0 件