CSSで画像を丸くトリミングして表示する方法!
CSSで画像を丸くトリミングして表示する方法をサンプルコード付きで紹介します。SNSのプロフィール画像のよおうに四角い画像を切り抜いて丸く表示するテクニックをマスターしましょう!
CSSで画像を丸くトリミングして表示したい
この丸く見える画像ですが、実体が四角の画像からでもCSSのborder-radius
のプロパティを使って丸で表示する事が出来ます。
今回はCSSで四角い画像を丸くトリミングして表示する方法を解説していきます。
CSSで画像を丸くトリミングして表示する方法
それでは画像を丸くトリミングして表示するやり方の前にborder-radius
のプロパティについて紹介します。
border-radiusとは?
border-radius
のプロパティは要素の四隅の角を丸めるためのプロパティです。
値には四隅の角丸の値を指定していきますが、すべて一括で指定する方法と個別に指定する方法などいくつかパターンがありますので、まとめて紹介します。
border-radiusの設定例
- border-radius: 5px;
四隅すべてに角丸を一括で5pxで設定 - border-radius: 5px 10px;
四隅のうち左上、右下が前者の5px、右上と左下が後者の10pxで設定 - border-radius: 5px 10px 15px;
四隅のうち左上が最初の5px、右上と左下が2つ目の10px、右下が最後の15pxで設定 - border-radius: 5px 10px 15px 20px;
四隅それぞれで設定。左上・右上・右下・左下の順番。
上記ではborder-radius
の値の単位はpx
としていますが、%
も指定可能です。
そして角丸で「円」を実現するにはborder-radius
の値を50%
にします。それでは具体的なやり方をサンプルコードを使って解説していきます。
画像を丸くトリミングして表示する
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で丸く円で表示することが簡単に出来ます。
この画像を丸くするテクニックは現場でもかなり使われる方法ですので、ぜひマスターしておきましょう。
ぜひ今回ご紹介した方法をお試し下さい!
また下記の記事では画像を斜めや平行四辺形にトリミングするやり方を紹介しています。ぜひ参考にしてみて下さい。

WEBサイトの中でSNSのプロフィールのアイコンなど画像を丸く表示しているアイコンなどをよく見かけますよね。