Slick Slider (+ ACF) all images same height

I know this question has been asked multiple times, yet none of them have solved my problem.
I have a slick slider (with ACF pro) and I just want all my images to be the same height (that means: All the portrait img have the same height (and changes their width) as a landscape img).

Here is my current code:
HTML

<section>
  <div>
    <?php $images = get_field('portfolio_images'); ?>
    <?php if( $images ): ?>
      <div class="multiple-items">
        <?php foreach( $images as $image ): ?>
          <img src="<?php echo $image['url']; ?>" />
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>

  <div class="text-container">
    <a>test</a>
  </div>
</section>

CSS

section {
  width: 80%;
  height: auto;
}

.slick-slide {
    width: 50vw;
    height: 50%;
    box-sizing: border-box;
}

JS

  <script>
  jQuery(document).ready(function($){
    $('.multiple-items').slick({
      variableWidth: true,
      centerMode: true,
      slidesToShow: 1,
      slidesToScroll: 1,
    });
  });
  </script>

As example given by the Slick site:

enter image description here

Leave a Comment