Регулировка высоты карусели

Question

Я хочу отобразить Карусель в прямоугольнике (высота

Вы можете проверить мой код здесь:

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

Однако, теперь «эскизы предложений» выглядят странно.

Как мне изменить размеры эскиза?

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>