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

CSSで画像を丸くトリミングして表示する方法をサンプルコード付きで紹介します。SNSのプロフィール画像のよおうに四角い画像を切り抜いて丸く表示するテクニックをマスターしましょう!

コンテンツ [表示]

  1. 1CSSで画像を丸くトリミングして表示したい
  2. 2CSSで画像を丸くトリミングして表示する方法
  3. 2.1border-radiusとは?
  4. 2.2画像を丸くトリミングして表示する
  5. 2.3枠線を表示する
  6. 3まとめ

CSSで画像を丸くトリミングして表示したい

画像を円形にするイメージ

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

この丸く見える画像ですが、実体が四角の画像からでも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-fitobject-positionのプロパティを利用します。

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

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

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

あわせて読みたい
object-fit
CSSのobject-fitプロパティはボックスの中の画像や動画をどのようにサイズ調整してはめ込むか制御するプロパティです。object-fitプロパティの構文や使い方をサンプルコード付きで解説します。
あわせて読みたい
object-position
CSSのobject-positionプロパティはボックス内の画像や動画などの表示位置を制御するプロパティです。object-positionプロパティの構文や使い方についてサンプルコード付きで解説します。

枠線を表示する

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

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

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

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

まとめ

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

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

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

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


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

あわせて読みたい
CSSで画像を斜めや平行四辺形にトリミングする方法!のイメージ
CSSで画像を斜めや平行四辺形にトリミングする方法!
CSSで画像を斜めや平行四辺形でトリミングする方法をサンプルコード付きで解説していきます。CSSで画像を切り抜くやり方を覚えて、CSSで画像をより自由自在に扱えるようになりましょう!

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次