Попытка сделать карусель с изображениями разного размера

Question

Я пытаюсь создать карусель, которая будет содержать мои изображения с целевым height (750px), но автоматическим width, чтобы он не выглядел сжатым, но я в основном только хочу контролировать height, и я ' Я в порядке с width установлением того, что должно быть.

Я до сих пор строил свою карусель с Slick, и я попытался настроить ее под свои нужды. Пока у меня это в основном работает, но интервал не согласован, и ширина изображения не увеличивается, поскольку она ограничена div, под которым он находится, но я не уверен, как заставить это работать без этого div.

Я возился с css и html, но не могу заставить мои изображения быть менее строгими. В моем примере вторая картинка длинная и обрезается, поскольку она не может уместиться сама по себе, а затем мешает установленному интервалу. Я знаю, что это немного грязно, но если есть какой-то возможный способ отрегулировать это, чтобы добиться того, что мне нужно, это было бы здорово! Спасибо!

Я также приложу 2 фотографии карусели квадратного пространства, которую я хочу подражать (их карусель галереи). Я не использую их, потому что она не позволяет мне добавлять субтитры под каждым изображением и есть счетчик, показывающий, на каком изображении вы находитесь (над которым я все еще работаю). В противном случае их карусель - именно то, что я ищу.

карусель квадратного пространства (1)

квадратная карусель (2)

$(document).ready(function(){
  $('.menu-toggle').on('click', function(){
    $('.nav').toggleClass('showing');
    $('.nav ul').toggleClass('showing');
});

$('.post-wrapper').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: false,

  autoplaySpeed: 2000,
  nextArrow:$('.next'),
  prevArrow:$('.prev')
});

});

body{
  overflow-x:hidden;
}
.post-slider{
  border:1px solid red;
  width:100%;
    margin: 0 auto;
  position:relative;

}
.post-slider .next{
  position:absolute;
  top:50%;
 right:0;
  z-index:100;
  color:black;
  cursor:pointer;
}
.post-slider .prev{
  position:absolute;
  top:50%;
  left:0;
  color:black;
  z-index:100;
  cursor:pointer;
}
.post-slider .slider-title{
  margin:30px auto;
  text-align:center;
}

.post-slider .post-wrapper{
width:850px;
height:750px;
margin:0px auto;
  border:1px solid blue;
  position:relative;

}

.post-slider .post-wrapper .post{
  display:inline-block;
  background:blue;
  
  margin: 0rem 3rem;
  
 height:750px;

}
.post-slider .post-wrapper .post .slider-image{
  display:block;
  height:100%;
  margin:auto auto;
 
}
.post-slider .post-wrapper .post .post-info h3{
  margin-top:7px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/uie1mjh.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">

<!------------------ html --------------->
<div class="page-wrapper">
//post slider
  <div class="post-slider">
    <h1 class="slider-title">Ignore the lines/colors for now, they are measurements</h1>
	<i class="fas fa-chevron-left fa-2x prev"></i>
    <i class="fas fa-chevron-right fa-2x next"></i>
    
    <div class="post-wrapper">
     <div class="post">
        <img src="https://im.rediff.com/getahead/2014/sep/25gail-da-silva1.jpg" class="slider-image">
        <div class="post-info">
          <h3>Image description</h3>
        </div>
      </div>
     <div class="post">
        <img src="https://wallpaperaccess.com/full/388744.jpg" class="slider-image">
        <div style="margin-top:3px" class="post-info">
          <h3 >Image description</h3>
        </div>
      </div>
      <div class="post">
        <img src="https://im.rediff.com/getahead/2014/sep/25gail-da-silva1.jpg" class="slider-image">
        <div class="post-info">
          <h3>Image description</h3>
        </div>
      </div>
      
    </div>
    <div style="justify-content:space-between">
      <span>
      4/10
    </span>
      <span style="float:right">
        View All
      </span>
    </div>
 
  </div>

</div>