react-active-carousel：如何在保持长宽比和最小化裁切的同时显示纵向图像？

Question

我有一个动态生成的幻灯片，其中包含各种尺寸的图像-其中一些是纵向的。 问题是react-sensitive-carousel（ https://www.npmjs.com/package/react-sensitive-carousel ）裁剪的人像方向图像超出我的期望，只能显示大约50％的图像。

理想的行为是将人像图像放到幻灯片放映高度的100％处，同时使其水平居中，从而完全可见（可能在两侧各留一些空白。）当前，风景图像在100％拉伸时看起来很好。容器的宽度。

<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>

Answer 1

CSS可用于修改由react-response-carousel生成的DOM节点，如下所示：

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

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

}