我有一个动态生成的幻灯片,其中包含各种尺寸的图像 - 一些是纵向的。问题是 react-responsive-carousel ( https://www.npmjs.com/package/react-responsive-carousel ) 裁剪纵向图像比我想要的多,只显示大约 50% 的图像。
期望的行为是纵向图像为幻灯片放映高度的 100%,同时水平居中,因此完全在 View 中(可能每边都有一些空白)。横向图像目前看起来不错,因为它们拉伸(stretch) 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>
最佳答案
CSS可以用来修改react-responsive-carousel生成的DOM节点如下:
.carousel-container {
position: relative;
max-width: 432px;
max-height: 289px;
.carousel {
.slide {
img {
height: 100%;
width: auto;
}
}
}
关于javascript - react 响应轮播 : How to display portrait orientation images while preserving aspect ratio and minimizing cropping?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50336718/