CSSで画像の好きな位置を円形にトリミングする方法
Twitterアイコンのように写真を丸く切り抜く必要に迫られたのですが、まぁそのくらいCSSで簡単に出来るやろ（鼻ほじ）と余裕かましていたら、ちょっぴりハマったので、備忘録としてφ(..)メモメモ。
画像を丸くするには border-radius を使う
■元画像
このとき、imgタグのstyle属性に border-radius を指定して、角丸画像にするのはよく使われる手法だと思います。
imgタグにborder-radius:20pxを適用した例
どうでしょう。写真の四隅が角丸になっているのがわかると思います。
border-radiusに20pxを指定して、20ピクセル分だけ角を丸めました。
そして、このborder-radiusを50%にしてあげるだけで円形になる……………と思ったのですが……………
■imgタグにborder-radius:50%を適用した場合
あー……… 正方形の写真ではないので、縦と横が半分ずつ角丸になれば、そりゃ楕円になるよなぁ………。
え、じゃあ縦横のサイズを指定したらどうなるんだっけ…と。
imgタグにborder-radiusと縦横200pxの指定を加えた場合
スリムなワンちゃんができちゃいました(ﾉ∀`)ｱﾁｬｰ
そりゃそっか。強制的に200x200pxの指定をすれば↓こうなるわけで。
そのまま円形に切り取ったら、こうなりますよね…。
縦横比を保ったまま画像を丸くするために object-fit を使う
object-fitについては「IE11でもobject-fitを使う一番簡単な方法」でも紹介していますが、画像をトリミングしてくれるプロパティです。
具体例はこんな感じで、左がobject-fitなし、右がobject-fit:cover;を指定した例。
どちらの画像も200ピクセル×200ピクセルですが、前者は被写体ごと強制的にサイズを変えるので縦横比が崩れている一方、後者は画像の一部を切り取ることで縦横比を保っています。情報が切り取られちゃうわけですから、どちらが良いという話ではなく、ケースバイケースでの使い分けですね。
あんま必要ない気もしますが、一応スタイルシートを書いておくとこんな感じ。
img {
width:200px;
height:200px;
object-fit:cover;
}
では、ここに先述のborder-radiusを加えて円形に切り取ったらどうなるか、という話です。
img {
width:200px;
height:200px;
object-fit:cover;
border-radius:50%;
}
無事、被写体の縦横比はそのままで円形に切り取れました。
ただ……、贅沢を言うと耳がちょっと見切れちゃってるのが気になりますね？
トリミング位置を調整するには object-position を使う
■CSS例
img {
width:200px;
height:200px;
object-fit:cover;
border-radius:50%;
object-position:0px 0px;
}
object-fit:cover;だけを指定すると写真の中央を基準として画像がトリミングされます。
それだと不都合な場合もあるので、そんなときは上述のように border-position で切り取り開始位置を指定。今回の例では 0px 0px なので左上ですね。
■左上を基準に円形で切り取る例
無事、左がわの耳が隠れなくなりました。
もうちょいワンちゃんが左でも良い気がするので、-20pxずらしてみます。
■CSS例
img {
width:200px;
height:200px;
object-fit:cover;
border-radius:50%;
object-position:-20px 0px;
}
■左上から更に-20pxずらして円形で切り取る例
どうでしょう。いい感じで円形に切り抜けたのではないでしょうか。
まとめ
- 画像を角丸にするにはCSSプロパティのborder-radiusを使う。
- 画像を円形にトリミングするのにもborder-radiusを使う。
- 但し、画像が正方形でない場合は楕円になるため、サイズ調整が必要。
- 縦横比を保ったままサイズ変更するにはobject-fitを使う。
- 中心以外をトリミングしたい場合はobject-positionで基準位置を調整する。
といったところでしょうか。
画像を円形にトリミング？ border-radius:50% 指定するだけやろ（鼻ほじ）
とか思っていましたが、ちゃんとやろうとするとobject-fitやobject-position等、多少の工夫が必要でした。
