見出し画像

【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


以上です。


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

note.user.nickname || note.user.urlname

読んでいただきありがとうございます!twitterもやってますのでよろしくお願いします。 https://twitter.com/koushikagawa

励みになります!
1
長野県松本市のWeb制作会社 Res, Inc. 代表 / Web ディレクター(IAが得意)、エンジニア(Laravel/PHP/MySQL/Nuxt.js/Vue.js/ Contentful/Netlify/Drupal/Wordpress)