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:

    <?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; ?>
    <?php endif; ?>

  <div class="text-container">


section {
  width: 80%;
  height: auto;

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


      variableWidth: true,
      centerMode: true,
      slidesToShow: 1,
      slidesToScroll: 1,

As example given by the Slick site:

enter image description here

19 thoughts on “Slick Slider (+ ACF) all images same height”

  1. 344647 194093Hiya! awesome blog! I happen to be a every day visitor to your web site (somewhat much more like addict ) of this internet site. Just wanted to say I appreciate your blogs and am seeking forward for a lot more to come! 835730


Leave a Comment