正方形の画像を円形にトリミングする #CSS

正方形の画像を円形にトリミングする #CSS

最近、googleのマテリアルデザインのおかげで何かと目にするになった円形トリミングを画像に適用するということについてです。以前、トリミングの話を書いたときは、imgをブロック(div)で囲んでやる方法を書いたのですが、別にブロックで囲まなくてもいいんじゃね?と思い直してやってみたら、普通にできたというだけの話です。

オチもなくてすみません。

さて、話を進めます。

正方形の画像を用意する

静岡浅間神社(36)

今回は以前いった静岡浅間神社の写真を利用します。

なんてことはないただのhtmlですが

wordpressの場合は、端からサムネイルが正方形にトリミングされているので、今回はsize-thumbnailのclassを使います。

円形にトリミングする

円形にトリミングするには、border-radiusを設定すればいいだけです。

ポイントはborder-radiusの値を100%にするということくらいです。違う値を入れてあげれば、角丸画像にすることもできますよ。

そんなわけでできた画像がこれ。
静岡浅間神社(36)

scssで設定したい人はこんな感じで書いておけばOK。ただし、compass使ってることを前提にしますが。

こうすれば、どのブラウザでもちゃんと表示されますね。きっと。

137 views/total