CODEWITHSUNDEEP
cssreactjsreact-elastic-carousel
Matt
Matt

Reputation: 1609

Set equal height of images in carousel

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

Upvotes: 3

Views: 2246

Answers (2)

Ali Klein
Ali Klein

Reputation: 1908

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

Upvotes: 3

arialdev
arialdev

Reputation: 51

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.

Upvotes: 0

Related Questions