时间戳

首页 > 解决方案 > react-responsive-carousel：如何在保持纵横比和最小化裁剪的同时显示纵向图像？

javascript - react-responsive-carousel：如何在保持纵横比和最小化裁剪的同时显示纵向图像？

问题描述

我有一个动态生成的幻灯片，其中包含各种尺寸的图像——一些是纵向的。问题是 react-responsive-carousel ( https://www.npmjs.com/package/react-responsive-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>

标签： javascriptcssreactjscarousel

解决方案

可以使用 CSS 来修改 react-responsive-carousel 生成的 DOM 节点，如下所示：

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

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

}

推荐阅读