毎回、切り取り画像をcssで記述するのがめんどうなので、mixin化しました。
コードは以下の通り。
コードの簡単な解説
各mixinについて
切り取りmixin
- rectangle-window
矩形に画像を切り取り。引数は幅、高さ、border-radius、border関連の順で指定。 - square-window
正方形に画像を切り取り。引数は幅もしくは高さのサイズ、border-radius、border関連の順で指定。 - circle-window
円形に画像を切り取り。引数は直径のサイズ、border-radius、border関連の順で指定。
画像の横長or縦長指定mixin
- window-for-more-horizontal-image
画像が切り取る形よりも、横長である場合は、こちらを指定。 - window-for-more-vertical-image
画像が切り取る形よりも、縦長である場合は、こちらを指定。
各セレクタについて
- .window-for-more-horizontal-image
セレクタによる画像の横長指定 - .window-for-more-vertical-image
セレクタによる画像の縦長指定
使い方
利用時の設定は以下の３つです。
- 切り取りmixin指定 (必須)
- 横長or縦長mixin指定 (画像を表示しないなら不要)
- 画像設定 (画像を表示しないなら不要)
詳細は、以下の利用例を参照してください。
See the Pen jZaWNL by m (@m3816) on CodePen.
補足
幅や高さ、サイズの指定の単位はvw推奨
vwはビューポートの幅に対する割合での設定となるので、ウィンドウサイズの変化に合わせて切り取り画像のサイズも変化します。指定はウィンドウ幅の50%のサイズに指定したい時は50vwを設定といった感じになります。 画像サイズを固定したい場合は、pxなどで設定してください。
