cssで長方形の画像を丸く切り抜く方法(備忘録)

丸く切り取った画像素材が欲しい！と思った時に、ECサイトとかやってると素材が四角形だったり長方形だったりして使い勝手が悪かったりします。
そんな時、cssで丸くできちゃったら楽だなって思ったので、書き留めておきます！

とりあえずソース！の前に一点、丸画像にするときは<img>を<div>で囲っておきます。

<div class="">
    <img>
</div>

この形をひとつの画像として扱うイメージです。

長方形画像を円形に切り取るシンプルな方法

たったこれだけ。
overflow: hidden; で中の画像が<div>の外に飛び出ないようにしています。
気をつけるのはそれくらいですね。
border-radius: 50px; はサイズに合わせて変更してくださいね。

これは画像の幅の100%かつ、切り取るのは画像のてっぺんからの円形です。
画像のある部分にフォーカスしたい場合は下のように書くと狙った箇所で切り取ることもできます。

画像内の狙った箇所にフォーカスしたい場合

食べかけのお弁当ですみません、、、

class="circle" にposition:relative;
中のimgにposition:absolute;をつけることで、あとは自由に場所を動かすことができます。
class="circle"で上下のサイズを指定しているので、中のimgの大きさを大きくしてもはみ出したりすることもないです。

基本はひとつ目でOK、こだわりたければふたつ目

扱う画像素材は長方形だったとしても、長方形なりのバランスで作られている画像のはずですので、基本的にはひとつ目の方法で作ってもバランス取れるんじゃないかなと思っています。
「もう少しズラして、ちょうどいいところに、、」という方はふたつ目の方法を試してみてください。

まとめ

• <div><img></div>でひとつの画像として扱う

• 外側にoverflow: hidden; 

• border-radius: ;を忘れずに

これでもう、担当者に「丸い画像ください、、」ってお願いしてそこからしばらく返事待って、なかなか共有されなくて「あの、画像どうなってますか？」っていう悲しいやりとりともオサラバです。