h's blog

備忘録とか勉強とか

矩形、正方形、円形に画像を切り取って表示するmixin (レスポンシブ対応)

f:id:hiro0164:20180216025135p:plain

毎回、切り取り画像を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
    セレクタによる画像の縦長指定

使い方

利用時の設定は以下の3つです。

  • 切り取りmixin指定 (必須)
  • 横長or縦長mixin指定 (画像を表示しないなら不要)
  • 画像設定 (画像を表示しないなら不要)

詳細は、以下の利用例を参照してください。

See the Pen jZaWNL by m (@m3816) on CodePen.

補足

幅や高さ、サイズの指定の単位はvw推奨

vwはビューポートの幅に対する割合での設定となるので、ウィンドウサイズの変化に合わせて切り取り画像のサイズも変化します。指定はウィンドウ幅の50%のサイズに指定したい時は50vwを設定といった感じになります。 画像サイズを固定したい場合は、pxなどで設定してください。

最新版コードは以下から。(更新や修正時はpushする予定です。)

github.com