CSSだけで画像を丸く切り抜く、Photoshopなど使わずにね

circular-cropping-of-rectangle-image-in-css-top

CSSネタ&備忘録シリーズ。レタッチソフトを使わずCSSで非破壊で画像を丸抜きする方法を紹介します。

ども、暑くても食欲が全く落ちず夏痩せが期待できない dice(@dice_dDtea)です。
今回のブログリニューアルでやったことを忘れないようにやり方を記しておこうかと思います。

今回はPhotoshopなどでレタッチして画像を丸く切り抜くんじゃなくCSSだけで完結してしまう方法です。
この方法だと、「気が変わった!丸から四角に戻そう!」「やっぱかど丸かな?」って時にイチイチ画像を弄るところまで戻らずに済むってとこですね。

この丸抜きは執筆者の前にあるアバターアイコンでやってます。
circular-cropping-of-rectangle-image-in-css-1

さ、早速やってきましょう!

スポンサード リンク

Photoshop使わず CSS だけで画像を丸く切り取る方法

例としてこんな画像(umah.jpg)を
umah
html <img>タグで配置します。

HTML
<img src="umah.jpg">

これだけでは指定しようがないんでクラス名を定義します。
サムネイル名なんで「thumb」としましょうか。

HTML
<img class="thumb" src="umah.jpg">

準備はできました。
CSSで丸抜きをします。

かど丸にする border-radius で 丸抜きができます

border-radiusを使います。
今回は直径 250px の円にしましょう。

CSS
.thumb { width: 250px; height: 250px; border-radius: 50px; }

かど丸の半径を指定幅の半分以上(大きい分は問題なく円になります)指定すれば円になります。

例えば、
width: 40px; height: 40px; なら border-radius: 20px;
width: 512px; height: 512px; なら border-radius: 256px;

e.g.

サイズは全て 250 x 250px とします。

指定幅半分未満の場合
CSS
.thumb { width: 250px; height: 250px; border-radius: 50px; }


たんなる かど丸四角形。

指定幅半分ジャストの場合
CSS
.thumb { width: 250px; height: 250px; border-radius: 125px; }


円です。

指定幅半分以上の場合
CSS
.thumb { width: 250px; height: 250px; border-radius: 250px; }


円ですね。大きさも変わらないようです。

応用して楕円にする
CSS
.thumb { width: 120px; height: 250px; border-radius: 60px / 125px; }


楕円になったけど・・・。

ちなみに border-radius の「/(スラッシュ)」区切りは「水平方向」と「垂直方向」と分けた半径指定です。
詳しくは

Sassで指定する場合は

Sass
.thumb { $w: 250px; width: $w; height: $w; border-radius: ($w/2); }

〆 まとめ

かど丸って言っても四隅全て丸になるような数値入力すれば正円にできるわけです。

丸く切り抜く場合は

border-radius で width、height の半分以上の数値を指定すべし!

全てCSSで何とかしたいコーダーに幸多かれ\(^o^)/
それでは~

コメント

Facebookコメント

※コメントしたけど表示されてない方へ

パーマリンクを変えてしまったおかげで表示されなくなってしまいました。
折角コメントいただいたのにスイマセンm(__)m
パーマリンク変更しても何とか表示できる方法を現在模索中です。

“Facebookコメント”じゃないコメントを残す

このコメント欄は一時的に且つ試験的に復活させ実装させています。スパムが増加すると廃止します。なのでできるだけFacebookのコメントでコメントをお願いします。m(__)m
なお、メールアドレスは公開されることはありません。

コメントを残す