Set equal height of images in carousel

user_350305 0
Viewed 721

I'm using react-elastic-carousel, and trying to enforce all images to be the same height. However, if I set the width 100%, the heights are all different. How can I make sure all images are the same height, without squishing or stretching the images?

Current state of carousel: link

react-elastic-carousel reactjs css
2 Answers

You could add a fixed height to the .slideImage (ex: height: 200px;) and add object-fit: cover so the image doesn't stretch and fills the entire space.

Codesandbox

user_76690100

I tried this:

.rec-item-wrapper {
  height: 100%;
  width: auto !important;
}

.slideImage {
  max-height: 310px; //This was the max-height already set
  width: auto;
}

I'm still learning CSS but I hope it helps.

user_122748240
Related