画像をこんな感じのフワフワとした円形に切り取ると、やわらかいイメージになりますね。
画像自体を丸く切り取りってもいいのでしょうが、画像を違うものに差し替えたいときに加工もやり直さないといけないので、やや面倒です。
そんな時はCSSで作っておく方が便利ですね。今回はこちらの画像を作っていきます。
角を丸くするborder-radiusで、四隅の数値を不揃いにすることで作っていきます。
border-radiusで角丸の画像に
私がいつも参考にさせてもらっている、Manaさんの書籍を参考にさせてもらいました。
『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」
CSSでborder-radiusを使うと画像を丸く切り取れます。
See the Pen
circle-shape by bat (@bat20190608)
on CodePen.
.circle-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 30%;
}上記のコードのうち、border-radiusを50%にすると正円になります。今回は30%にしてみました。そうすると角丸の四角い画像になっています。
border-radius で四隅をそれぞれ設定する
border-radius は、四隅を以下の順番で、別々の設定にできます。
書き方としては、以下のようになります。
『border-radius: 横の値（①〜④） / 縦の値（①〜④）;」
具体的にはこのようになります。
border-radius: 50px 100px 70px 150px / 50px 80px 70px 120px;
この例でいえば、左上が「横50px、縦50px」、右上が「横100px、縦80px」といった具合です。横と縦の数値をいろいろ入れ替えて、好みの形に設定できます。
aspect-ratioでアスペクト比(縦横比)を固定
モバイルサイズではパーセントで表示させ、デスクトップサイズではpx でサイズ指定しています。
画面サイズに関わらず、アスペクト比（縦横比）が変わらないように、aspect-ratio を設定しています。
See the Pen
irregular oval shape by bat (@bat20190608)
on CodePen.
.circle-image {
aspect-ratio: 5/4;
width: 80%;
object-fit: cover;
object-position: 50% 80%;
border-radius: 30% 70% 50% 30% / 50%;
}これでブラウザのサイズが変わっても、縦横のバランスは保たれます。
なお、表示される画像の位置が希望しているより上の方だったため、object-positon を設定して画像の下の方が表示されるようにしています。今回はobject-position の説明は割愛します。
まとめ
border-radius で4つの角を不揃いに角丸にすれば、手作りでトリミングしたような雰囲気のある画像が出来上がります。
aspect-ratio でアスペクト比を指定すれば、画像サイズが変わっても縦横のバランスが変わりません。
こういう手作りっぽい画像の切り抜きっていいですよね。個人的に結構好きです。
