Slick.jsでスライドショウを作っていますが、高さが調整できず、横スクロールバーが出る

Question

Slick.jsでスライドショウを作っていますが、高さが調整方法が分からず困っています。
また、横スクロールバーが出てしまいます。
Bootstrap4 を利用しています。

  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-md-12">
        <ul class="slider">
          <li><a href="#"><img src="./images/photo_1.jpg" alt="image01" class="img-fluid"></a></li>
          <li><a href="#"><img src="./images/photo_2.jpg" alt="image01" class="img-fluid"></a></li>
          <li><a href="#"><img src="./images/photo_3.jpg" alt="image01" class="img-fluid"></a></li>
        </ul>
      </div>
    </div>
  </div>
（中略）

<script>
$(function(){
  $('.slider').slick({
    accessibility: true,
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
  });
});
</script>
``
画像は1280px　× 960pxの画像を3枚利用しています。
スマホの時はいいのですが、ＰＣの場合にスライドショウ部分の高さが大きくなってしまい。縦スクロールをしないと 次のコンテンツが見れない状況にあります。
高さをコンパクトにして表示をスッキリさせることはできないでしょうか？
また、このスライドショウを設置すると横スクロールが発生してしまいます。
この解決も分かりません。

ご教授よろしくお願いいたします。

(追記)
横スクロールが出る現象について、画像を追加します。


![イメージ説明](9043b990c932bf3ca7f2a2bb3c034e5f.png)

Answer 1

以下のcssを適用してください。

.img-fluid {
  max-width: 100%;
  max-height: 50vh;
  display: block;
  margin: 0 auto;
}

viewportは記述しておいてください。
max-heightの値は適当に変えてください。

追記

* {
margin: 0;
padding: 0
}

も追記してみてください。

Comments

[hidepon]

ありがとうございます。
あと、横スクロールバーが消えません。
Slick のスライドショウを削除すると消えます。
このスライドショウの設置が影響していると思うのですが、
対処方法が分かりません。

[kyoya0819]

スクショを掲載していただけませんか？

[hidepon]

了解しました。ちょっとお時間を頂きます。
ぼかしたりするので。。すみません。

[kyoya0819]

了解です

[hidepon]

画像を追加しました。よろしくお願いいたします。

[hidepon]

うまくいかないですね・・・。bootstrap4 を利用しているですが、このプラグインとの相性なんですかね！？いろいろと試しているんですが。。。