Bootstrap４のカルーセルの画像の高さを揃え、画像を正常に表示したい

前提・実現したいこと

Bootstrap4で、カルーセルを使用してスライドの実装を行っており、
実現したいことは、スライドの高さを統一して、かつ画像の見切りがなく正常に表示をしたいです。

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

現状では、テストで400px固定にしているが、
それ以上のpxだと見切れてしまいます。
通常のスライドだと、画像の高さを反映してバラバラなスライドになります。

該当のソースコード

views/welcom.blade.php


<div class="row justify-content-center">
  <div class="col-12">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="carousel1 d-block" src="{{ asset('url') }}"> 
        </div>
        <div class="carousel-item">
          <img class="carousel2 d-block" src="{{ asset('url') }}">
        </div>
        <div class="carousel-item">
          <img class="carousel3 d-block" src="{{ asset('url') }}">
        </div>
      </div>
        <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
</div>

resources/sass/app.scss

.carousel {
  height: 100%;
  max-height: 400px !important;
}

.carousel-inner, .item {
  height: 100%;
}

.carousel1, .carousel2, .carousel3 {
    width: 100%;
}