見出し画像

【css】画像を丸く切り取る方法

twitterやインスタグラムのアイコンのように、画像が丸く表示されるのを最近よく見ます。

スクリーンショット 2019-11-06 17.08.56

スクリーンショット 2019-11-06 17.09.16

今回はcssにて画像を丸く切り取る対応方法を説明します。


正方形の画像の場合

下記のようなソースコードの場合。

<img src="/sample.jpg">

このままだと四角のまま表示されます。

スクリーンショット 2019-11-06 17.14.47

ここで、cssにborder-radiusを利用すると円形に切り取ることができます。

img{
border-radius: 50%;
}

下記のようになります。

スクリーンショット 2019-11-06 17.15.22


長方形の画像の場合

長方形の画像の場合、上記の対応だと楕円になってしまいます。

スクリーンショット 2019-11-06 17.16.09

なので、下記のようにwidthとheightを設定して正方形にします。

img {
   width: 160px;
   height: 160px;
   object-fit: cover;
   border-radius: 50%;
}

また、object-fitを利用して画像をトリミングしています。object-fitを利用しないと画像がぐちゃっとつぶれたようになってしまいます。。。

※objcect-fitについては下記参照ください。

これで正円になります。

スクリーンショット 2019-11-06 17.15.22


以上です。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Koushi Kagawa

読んでいただきありがとうございます。twitterもやってます。 https://twitter.com/koushikagawa

励みになります!
2
長野県松本市のWeb制作会社 Res, Inc. 代表。 Webサイト制作のPjMやってます。最近は100年以上続く松本市のパン屋さんスイート(sweet-bakery.co.jp)のアドバイザーも。 行動経済学と音楽とラジオとパンが好きです。koushikagawa.net