記事内に広告が含まれています。

CSSで画像を円形に切り抜く方法：object-fitが簡単で便利！

May 27, 2020

CSS,HTML,JS , コーディング

WEBサイトに円形の画像を載せたい時、画像自体を加工しなくとも、なんとCSSだけで円形に切り抜くことが出来るんです！
「object-fit」というCSSを使った方法をご紹介します。
ほんの数行記述するだけで出来ますよ！

1.正円に切り抜く

See the Pen gOaqdEr by natsuki (@natsukimemo) on CodePen.

上の右の画像が元の画像で、左がCSSで円形に切り抜いたものです。
コードは下記になります。

HTMLは、imgタグにクラスを付与しています。
円形に切り抜いたものがクラス「sample01」を、元の画像にはクラス「original」を付与しています。

<img class="sample01" src="画像のパス">
<img class="original" src="画像のパス">

CSSは下記になります。
sample01のCSSに注目です。

.sample01{
  width: 260px;
  height:260px;
  border-radius: 50%;/*角丸*/
  object-fit:cover;
}
.original{
  height:260px;
}

CSSで正円を描くには、widthとheightに同じ値を入れて、border-radiusの値を50%以上にします。（上記CSS2～4行目）
border-radiusとは四隅の角を丸くするためのプロパティです。

そして、画像を切り抜くプロパティがobject-fitプロパティです。（上記CSS5行目）
この一行を追加するだけで画像が切り抜かれます。 sample01は値をcoverにしています。

画像を正円に切り抜くCSS

widthとheightに同じ値を入れる
border-radiusの値を50%以上にする
object-fitプロパティを指定する

2．object-fitプロパティの値

先ほどから「画像を切り抜く」といった表現をしていますが、object-fitプロパティは、正確には「ボックス内に要素を収める（はめこむ）」ためのCSSです。

5つの値を指定することが出来、下のように表示が異なります。

See the Pen xxwMmGW by natsuki (@natsukimemo) on CodePen.

1. fill（初期値）

はめこむ要素（imgなど）の縦横比を維持しないで、ボックスに全体が見えるように収めます。

2.cover

はめこむ要素（imgなど）の縦横比を維持し更に要素の縦が100％、ボックスに収まるようにトリミングします。

3.contain

はめこむ要素（imgなど）の縦横比を維持しながら、全体が見えるように収めます。

4.scale-down

はめこむ要素（imgなど）のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながら全体が見えるように収めます。はめ込む要素の実寸サイズとボックスサイズの大小関係に応じてcontain または noneを指定したの表示になります。

5.none

ボックスサイズでトリミングして収めます。

3. object-positionで位置を調整

object-fitは要素の中心を基点にトリミングしますが、「object-position」を指定することで、任意の位置でトリミングすることができます。

下が元画像です。

下は、object-positionをいろいろな値で指定してみました。

See the Pen rNOPoNw by natsuki (@natsukimemo) on CodePen.

1. 指定なし

object-positionを指定しないと、要素（imgなど）の中心を基点に切り抜かれます。

2. object-position:0;

「0」を指定すると、要素（imgなど）の左上を基点に切り抜かれます。

3. object-position:60px -120px;

2つの数値を指定すると一つ目がX軸を、二つ目の数値がY軸を意味します。

4.IEで効かせる方法

object-fitプロパティの対応ブラウザは、Chrome、Safari、FireFox、Operaで、IEはサポートしていません。
ですが簡単な方法で、IEでもobject-fitを使えるようになるのでご紹介します。

fitie.jsを使う

まず、下記のGitHubにアクセスして表の右角「Clone or Download」からfitieをダウンロードします。

サイト外関連リンク：GitHub：fitie.js

https://github.com/jonathantneal/fitie

ダウンロードしたらdistフォルダ内にあるfitie.jsをサーバーにアップして、HTMLに下記を記述してスクリプトを読み込みます。

<script src="fitie.js"></script>

これだけです。
あとは普通にCSSにobject-fitプロパティを記述します。

5.まとめ

object-fitは、円形だけでなくSVG画像などを利用すれば三角形でも星形でもいろいろな形に切りだすことが出来ます。

これまで画像加工ソフトなどで切り出していたのが、CSSだけでできるなんてとても楽ですね。
ぜひobject-fit、使ってみてください。

この記事がお役に立てると幸いです。

【番外】WEB制作におすすめの本

リンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

リンク