css - 转盘高度调节

Question

我想在一个矩形中显示 Carousel（高度

你可以在这里查看我的代码：

<div>
                <NavBar/>
                <div className="carousel-wrapper">
                    <Carousel width={"40%"}>
                        {
                            this.state.images.map((photo, index) => (
                                <div>
                                    <img src={photo}/>
                                </div>
                            ))
                        }


                    </Carousel>
                </div>
            </div>

正如@Awais 所建议的，我为图像添加了以下样式：

Carousel autoPlay={true}showArrows={true} width={"70%"} showIndicators={true} infiniteLoop={true} >
                            {
                                this.state.images.map((photo, index) => (
                                    <div>
                                        <img src={photo} style={{width: "100%", height:"400px",objectFit:"cover"}}/>
                                    </div>
                                ))
                            }
                        </Carousel>

但是，现在“建议缩略图”看起来很奇怪。

我该如何更改 thu,bnail 尺寸？

标签： cssreactjscarousel

Answer 1

正如您在下面的小提琴中看到的那样，由于object-fit:cover属性的原因，图像是如何裁剪的，就像background-size:cover

将img样式应用于您的图像carousel，如果不适用，请尝试使用!important覆盖轮播样式

img{
 width: 100%;/*to stretch it to full widht*/
 height: 200px;/*you image square height*/
 object-fit:cover; /*cover you image*/
}

<div>
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>