react-responsive-carousel: How to display portrait orientation images while preserving aspect ratio and minimizing cropping?

0
votes

I have a dynamically generated slideshow with various sizes of images - a few are portrait orientation. The issue is that react-responsive-carousel (https://www.npmjs.com/package/react-responsive-carousel) crops the portrait-orientation images more than I would like, only showing about 50% of the image.

The desired behavior is for the portrait images to be 100% of the slideshow height, while being horizontally centered, therefore completely in view (possibly with some empty space on each side.) Landscape images currently look fine, as they stretch 100%, across the width of the container.

<div className="carousel-container">
    <Carousel showThumbs={false} showStatus={false}> 
        <img src="https://placekitten.com/300/200" />
        <img src="https://placekitten.com/202/300" />
        <img src="https://placekitten.com/302/200" />
    </Carousel>
</div>
1
javascriptcssreactjscarousel

1 Answers

-1
votes

CSS can be used to modify the DOM nodes generated by react-responsive-carousel as follows:

.carousel-container {
    position: relative;
    max-width: 432px;
    max-height: 289px;

     .carousel {
        .slide {
            img {
                height: 100%;
                width: auto;
            }
        }
     }

}