【Swiperスライダー】バラバラの画像サイズを上下中央に揃えて実装する方法

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./images/demo01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./images/demo02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
       <img src="./images/demo03.jpg" alt="" />
    </div>
   </div>

<!-- 丸いページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>

<!-- 左右のページ送り -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

.swiper-container {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  height: 40vw;
  max-height: 600px; //最大の高さ
  min-height: 400px; //最小の高さ
    
  .swiper-slide {
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: flex-start; //画像の高さを統一させない
    justify-content: center; //左右の中央揃え

    img {
      display: inline; //念のため
      width: auto; //念のため
      max-width: 100%;
      max-height: 100%;
      align-self: center; //上下の中央揃え
    }
  }
  .swiper-button-white {
    &:focus {
      outline: none;
    }
  }
  .swiper-button-prev {
    left: 25px;
  }
  .swiper-button-next {
    right: 25px;
  }
}

window.addEventListener('load', function(){
  let mySwiper = new Swiper(".swiper-container", {
    loop: true, //無限ループさせる
    speed: 400, //移動するスピード
    loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
    allowTouchMove: false,//マウスでのスワイプを禁止
    pagination: { //円形のページネーションを有効にする
     el: ".swiper-pagination",
     clickable: true //クリックを有効にする
    },
    navigation: { //左右のページ送りを有効にする
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
    }
  });
});