OfficeExcelゲームゲームのお話ホームウェブ制作JavaScript・JQuery高さ変更!slickスライダーで画像サイズがバラバラの時の2つの対処法!【jQuery】2019年6月29日SHAREツイートシェアはてブLINEPocketslickでスライダーを作る時にいちいち同じサイズで画像を作るのがめんどくさい!と思ったことはありませんか?バナーのようなデザインのメインビジュアルの場合は、サイズを合わせて作ればいいのですが、風景画像をスライドで背景にしたい場合はわざわざ同サイズで作るのが面倒です。いうわけで今回は「slickスライダーで画像サイズがバラバラの時の対処法!」を2つご紹介します!slickの設置がされているという前提で進めていきますので、「まだ!」という方は、下記の記事で紹介してますのでslickを準備してください。画像にスライダーを合わせにいく方法slickのoptionで設定slickのオプションに下記の1行を追記すれば、画像サイズがバラバラでもスライダーが対応します。オプションに追記adaptiveHeight:trueこちらのオプションをtrueで実行すると、スライドの高さの自動調整が行われます。この場合スライダーが画像に合わせて動くため、忙しない印象になります。実用的ではないかもしれないです。中の画像がbackground-size:coverの様になれば、画像サイズに関係なく比率を保ったまま親要素いっぱいにすることができます。なるようにCSSで設定をしていきます。CSSで高さとobject-fitの指定object-fitを使うことでスライドの幅いっぱいに画像を広げることができます。cover;}解説img要素への指定が「width:100%」だけだと画像の横幅の比率に応じた高さになります。画像サイズによってスライダーの高さが変わってしまう状態です。それを改善するために「vw」の単位を使って、heightで高さを指定していきます。幅を指定する単位で、1vwは横幅の1%に値します。Height(vh)です。自動で値が変わるのでレスポンシブのサイトを作る時に重宝します。あれ?高さ指定ならvhでは?高さを指定する値はvhのはずなのに、幅を指定する「vw」をなぜ使うのでしょうか?結論から言いますと「横幅に合わせて可変させたいから」です!下の画像を見てもらえるとわかるかと思いますが、vhで高さを指定すると、ウィンドウの高さに相対して値が決まるので、ウインドウの横幅を縮めても高さは変わりません。横に縮めても高さは変わらない。逆に縦に縮めると高さは変わる。高さの指定をvwで行うとどうなる?高さの指定をvwで行うと、画面の横幅の数値が高さとなります。フルHDのモニターだとしたら画面幅は1920pxです。50vwと指定すると1920pxの半分ということになるので960pxになります。width:50とすると横幅が960px。height:50とすると高さが960pxになります。なんとなくでも伝わりましたか...?今回は「50vw」としているので、「スライダーの高さは画面の横幅の半分の数値になる」ということです。下の画像を見ると先ほどの画像と違う動きをするのがわかります。高さが横幅の半分になるため、ウィンドウ幅を小さくすれば高さも短くなっていきます。高さをvwで設定すると、ウィンドウの横幅に応じて、中のスライダーの高さが短くなっていく。高さの指定だけですと、50vhの高さに合わせて画像が横や縦に伸びてしまうので、ブロック要素内の画像をbackground-size:coverの様にできる「object-fit:cover」を指定してあげます。コメントをキャンセルメールアドレスが公開されることはありません。【イラスト成長記録】#2.できないことは約束しちゃダメヒロキWebデザイナーしています。