【slick】画像を中央にしながら縦横比を維持して画面いっぱいに表示

slickで画像を中央にしながら縦横比を維持して画面いっぱいに表示ってどうやるの？

例えばトップページのファーストビューなどは、スライダーを画面いっぱいに表示させたい場合もあるかと思います。

特に難しいコードが出てくるわけではありませんが、いざ実装しようと思った時「あれ、どうやるんだっけ？？」となる人も多いかと思うので書いておきたいと思います。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

5大無料特典2023年12月31日まで！

slickで画像を中央にしながら縦横比を維持して画面いっぱいに表示

まずはデモをご覧下さい。

HTML、CSS、JSなどをクリックすると画面が半分になりますが、画像が中央にあって縦横比そのままで画面いっぱいになっていると思います。

それでは簡単ですがコードを解説、というかご紹介します。

HTMLとjQueryは特に変わったところはありません。

CSSはこちらになります。

.slick-img img {
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

object-fit: cover; がないと縦横比を維持せず画像が潰れてしまうのでご注意下さい。

簡単ですが以上になります。

Web制作におすすめの教材と案件獲得サービス！

当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。

こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。

また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。

スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。

この記事を参考にスキルと営業力を身につけて稼げるようになりましょう！