slickでスライダーを作る時にいちいち同じサイズで画像を作るのがめんどくさい！と思ったことはありませんか？
バナーのようなデザインのメインビジュアルの場合は、サイズを合わせて作ればいいのですが、風景画像をスライドで背景にしたい場合はわざわざ同サイズで作るのが面倒です。
というわけで今回は「slickスライダーで画像サイズがバラバラの時の対処法！」を2つご紹介します！
slickの設置がされているという前提で進めていきますので、「まだ！」という方は、下記の記事で紹介してますのでslickを準備してください。
簡単にスライダーを設置！JQueyプラグイン「slick」の使い方【jQuery】
画像にスライダーを合わせにいく方法
slickのoptionで設定
slickのオプションに下記の1行を追記すれば、画像サイズがバラバラでもスライダーが対応します。
adaptiveHeight:trueこちらのオプションをtrueで実行すると、スライドの高さの自動調整が行われます。
しかし、この場合スライダーが画像に合わせて動くため、忙しない印象になります。
あまり実用的ではないかもしれないです。
スライダーの高さを指定する方法
中の画像がbackground-size:coverの様になれば、画像サイズに関係なく比率を保ったまま親要素いっぱいにすることができます。
そうなるようにCSSで設定をしていきます。
CSSで高さとobject-fitの指定
object-fitを使うことでスライドの幅いっぱいに画像を広げることができます。
.slider img {
width: 100%;
height: 50vw;
object-fit: cover;
}解説
img要素への指定が「width：100%」だけだと画像の横幅の比率に応じた高さになります。
つまり画像サイズによってスライダーの高さが変わってしまう状態です。
それを改善するために「vw」の単位を使って、heightで高さを指定していきます。
あれ？高さ指定ならvhでは？
高さを指定する値はvhのはずなのに、幅を指定する「vw」をなぜ使うのでしょうか？
結論から言いますと「横幅に合わせて可変させたいから」です！
下の画像を見てもらえるとわかるかと思いますが、vhで高さを指定すると、ウィンドウの高さに相対して値が決まるので、ウインドウの横幅を縮めても高さは変わりません。
高さの指定をvwで行うとどうなる？
高さの指定をvwで行うと、画面の横幅の数値が高さとなります。
例えばフルHDのモニターだとしたら画面幅は1920pxです。
50vwと指定すると1920pxの半分ということになるので960pxになります。
つまりwidth：50とすると横幅が960px。height：50とすると高さが960pxになります。なんとなくでも伝わりましたか…？
今回は「50vw」としているので、「スライダーの高さは画面の横幅の半分の数値になる」ということです。
下の画像を見ると先ほどの画像と違う動きをするのがわかります。高さが横幅の半分になるため、ウィンドウ幅を小さくすれば高さも短くなっていきます。
最後にobject-fitを指定
高さの指定だけですと、50vhの高さに合わせて画像が横や縦に伸びてしまうので、ブロック要素内の画像をbackground-size:coverの様にできる「object-fit:cover」を指定してあげます。
これで完成です！
