もうご存知の方は多いかと思いますが、画像をCSSだけで円形に表示することができます。
正確に言うと実際の画像は四角形のままですが、丸くトリミングされているようにWebページ上で表示されます。
以前はこういった表現はPhotoshopで加工してからサイトで使っていました。
ただ、その場合だとPhotoshopが使えないと簡単に写真の更新ができなかったし、Photoshopが使えたとしても手間でした。
CSSだけで装飾の設定をしておけば、後からの更新は写真を差し替えるだけなので誰でもできてかなり楽になります。
CSSのみで写真を円形に表示するには2つ方法があります。
画像をimgで配置する方法と、要素のbackgroundで表示させる方法です。
それぞれのメリットとデメリットをまとめました。
画像をimgで配置する方法
メリット
- ページ内で画像として扱える。
- CSSが無効になる環境でも画像が表示される。
- 記述が簡単。
デメリット
- あらかじめ画像を正方形に加工しておく必要がある。
- 長方形だと角がトリミングされるだけなので角丸長方形になる。
元画像
HTML
<img class="clipping" src="pic_01.jpg" />
CSSでトリミング
CSS
.clipping {
border-radius: 50%;
}
border-radiusの値に画像の横幅の半分のpxを設定することでも可能ですが、50%にしておけばサイズに関係なく円形になります。
WordPressではプログラムで画像を正方形にトリミングさせることができるのでこの方法が多いかもしれません。
Instagramの正方形の写真を使う場合もこちらで大丈夫ですね。
下記のように元画像が長方形だと角丸長方形になってしまいます。
要素のbackgroundで表示させる方法
メリット
- 元画像が長方形でもキレイな円形になる。
- 背景画像なので、写真の表示させたい位置でトリミングできる。
デメリット
- 背景画像として表現しているためCSSが無効だと表示されません。
元画像
CSSでトリミング
HTML
<div class="clipping" ></div>
CSS
.clipping {
background-image:url('pic_01.jpg');
display: block;
width: 200px;
height: 200px;
background-position: top center;
background-size: cover;
border-radius: 50%;
}
background-positionで表示させる位置を決められます。
background-size:coverを指定しておけば、要素のサイズにフィットします。
最初だけ少し手間かもしれませんが、指定しておけばどんなサイズの画像が入ってもキレイに同じ大きさの円形に並べて表示させることができますよ。
