slickスライダーで画像の高さを揃える方法【jQuery】

slickでスライダーを作る時にいちいち同じサイズで画像を作るのがめんどくさい！と思ったことはありませんか？

バナーのようなデザインのメインビジュアルの場合は、サイズを合わせて作ればいいのですが、風景画像をスライドで背景にしたい場合はわざわざ同サイズで作るのが面倒です。

というわけで今回は「slickスライダーで画像サイズがバラバラの時の対処法！」を2つご紹介します！

slickの設置がされているという前提で進めていきますので、「まだ！」という方は、下記の記事で紹介してますのでslickを準備してください。

slickの導入方法は簡単にスライダーを設置！jQueryプラグイン「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を指定

高さの指定だけですと、50vwで決まった高さの枠に合わせて画像が横や縦に伸びてしまうので、ブロック要素内の画像をbackground-size:coverの様にできる「object-fit:cover」を指定してあげます。

これで完成です！

まとめ

• adaptiveHeight:trueは手軽だが、スライドごとに高さが変わって忙しない印象になりがち
• 高さをvw単位で指定し、object-fit: coverを組み合わせると、画像サイズがバラバラでも綺麗に揃う
• vwを使うのは「画面の横幅に応じて高さも可変させたいから」。vhだと横幅を縮めても高さが変わらず、レスポンシブに対応できない
• 縦横比そのものを固定したい場合はaspect-ratioプロパティという選択肢もある