Web制作 スライダー

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

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

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

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

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

レスポンシブ対応のスライダープラグイン「slick」の使い方

【初めて使う人向け】jQuery本体を読み込む方法

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

slickのカスタマイズ用オプション一覧をご紹介

効率よくコーディングしたい人はこちら

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

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

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

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; がないと縦横比を維持せず画像が潰れてしまうのでご注意下さい。

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

 

コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-Web制作, スライダー
-