CSSで画像を丸くトリミングして表示する方法！

この丸く見える画像ですが、実体が四角の画像からでもCSSのborder-radiusのプロパティを使って丸で表示する事が出来ます。

今回はCSSで四角い画像を丸くトリミングして表示する方法を解説していきます。

それでは画像を丸くトリミングして表示するやり方の前にborder-radiusのプロパティについて紹介します。

border-radiusのプロパティは要素の四隅の角を丸めるためのプロパティです。

値には四隅の角丸の値を指定していきますが、すべて一括で指定する方法と個別に指定する方法などいくつかパターンがありますので、まとめて紹介します。

上記ではborder-radiusの値の単位はpxとしていますが、%も指定可能です。

そして角丸で「円」を実現するにはborder-radiusの値を50%にします。それでは具体的なやり方をサンプルコードを使って解説していきます。

ではまずborder-radius:50%を適用してみましょう。

するとこのように楕円形として表示されます。これは画像が長方形であるため（正方形ではない）です。画像が正方形であればきれいな円で表示されますが、ここでは長方形のため楕円となっています。

ではこの状態でどしたら円にできるのでしょうか？

次にwidth/heightを同じ値を指定してみましょう。

すると今度はきれいな円として表示されています。これは長方形の画像を無理やり正方形のサイズにして、その上で丸くしているためです。

ただしこの場合では画像の縦横比によっては歪んでしまう問題があります。歪みが許容範囲である場合はそのままでもいいですが、許容できない場合は画像のどの部分を切り抜いて表示するかの選択になります。

縦横比を保ちつつ、丸く切り抜くためには長方形の画像のどの部分を切り抜いて表示するかを選択する必要があります。

画像の左上なのか？真ん中なのか？右下なのか？などです。

縦横比を保ちつつ、任意の箇所を切り抜くにはobject-fitとobject-positionのプロパティを利用します。

object-fit: coverとすることで円で表示している領域全体に画像を表示することができ、更にobject-positionでどの部分を表示するかを指定しています。
（何も設定しなければ真ん中を切り抜く）

例えばobject-positionで0 0を指定すると左上を指定することになります。-60px 0を指定すると-60pxずれて切り抜きます。

この値についてはrightやtopなど方向を表す文字で指定したり、%でも指定可能です。

さてでは最後にSNSでよくあるアイコンに似せていきましょう。

これまでのやり方で長方形の画像を丸く円形で表示できるようになったので、あとは枠線を追加します。枠線はおなじみのborderプロパティで指定していきます。

いかがでしょうか。丸くなっているアイコン画像がより強調されて表示されます。

少し枠線と画像の間に余白を入れたい場合は、paddingで余白をとりましょう。

いかがでしたでしょうか。CSSで画像を丸く切り抜いて表示する方法を解説してきました。

わざわざ丸い画像を作成しなくても、四角い画像からでもCSSで丸く円で表示することが簡単に出来ます。

この画像を丸くするテクニックは現場でもかなり使われる方法ですので、ぜひマスターしておきましょう。

ぜひ今回ご紹介した方法をお試し下さい！


また下記の記事では画像を斜めや平行四辺形にトリミングするやり方を紹介しています。ぜひ参考にしてみて下さい。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。