ヘッダー画像をheightはviewport一杯で、横幅の変更には画像が縦横比を維持しながら拡大縮小するようにし、レスポンシブ対応させたい。

Question

前提・実現したいこと

現在こちらのサイト　(https://pas-pol.jp/)　の模写コーディングをやっております。
ヘッダー画像にslickというjQueryプラグインを使いカルーセル表示は実装できましたが、見本のようなレスポンシブな画像の表示が出来ていません。私が書いたCSSではviewportの横幅を変更すると縦横比を維持するため画像のheightも変わってしまい、見本のようなheightが100vhを維持したままのような表示になりません。見本のサイトではWordPressのプラグインを使っているようですが、WordPressを使わずにこの様なレスポンシブ画像にするにはどんな方法があるでしょうか？

発生している問題・エラーメッセージ

該当のソースコード

 <div class="slick">
　　<img src="images/index_header_image01.jpg">
　　<img src="images/index_header_image02.jpg">
　　<img src="images/index_header_image03.jpg">
　　<img src="images/index_header_image04.jpg">
　　<img src="images/index_header_image05.jpg">
　</div>

　img {
  width:100%;
  max-width: 100%;
  height: auto;
  }

  $('.slick').slick({
      autoplay: true,
      autoplaySpeed: 6000,
      arrows: false,
      adaptiveHeight: true,
      fade: true,
      speed: 3000,
      centerMode: true,
      pauseOnHover: false,
      centerMode: true,
  }); 

試したこと

・heightを100vhにしたが縦横比が崩れた。
・画像をbackground-imageで表示しようとしたが、slickが効かなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

画像のheightは指定がないようです。
JavaScriptでスクリーンの高さを取得して、それに合わせて縦横比が崩れないようにスライダーの幅を設定し、overflow:hidden で溢れる部分を切っているようですね。
スクリーンの縦横比によって、高さを優先するか、幅を基準にするか、決めているようです。