Slider with height problem when you got landscape and portrait images: How to fix this??

[Pacn91]

Hi, I don't know if this is an issue or it's intended to be like this. I'm having a problem when I try to show portrait images and landscape images in the same slider:

As you can see from the image above, the image slider pushes down the slick nav, and the slick nav pushes down the slick dots, all because there are some images in portrait mode. Is there any way to fix this? The slick is dynamic and I want to keep that. Would be great if the images that are in portrait mode stick to the same height as the other ones, and being contain in the div. Hope you can help me.

Thank you!

[icdindia]

have you tried variable width mode? I believe that should solve your problem if the height of all of your images is the same.

[Pacn91]

Unfortunately, the images have different heights

[roydekleijn]

Any way you solved this issue?

[Pacn91]

Any way you solved this issue?

Hi! I'm not a great programmer so don't expect much xD But the way I solved this was the follow:

First I had to wrap the image in a container with fixed height. Then when I load my image I call a javascript function to check if the image height is greater than its width, like so:

function getOrientation(element){

  // you need to create a new image to get the original dimensions of the image
  let screenImage = $(element);
  let theImage = new Image();
  theImage.src = screenImage.attr("src");

  $(element).addClass(function() {
    if (theImage.height > theImage.width) {
      return "portrait";
    }
  })
}

As you can see if the height is greater I give a class of "portrait" to the image.

Then in my stylesheet I change the object fit of the container (default is cover) to contain, like so:

img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   &.portrait {
      height: 100%;
      object-fit: contain;
   }
}

Hope this can help you in some way.