响应式轮播以适应父容器的宽度和高度

Question

我是新来的反应。 我试图设置一个小应用程序。在主页上，我们有轮播。 我的主页代码是：

render(){
        return (
            <div className="main-page">
                <div className="row full-height">
                    <div className="common-info col-lg-7">
                        <div className="row center-lg logo-container">
                            <LogoImg/>
                        </div>
                        <CarouselComponent/>
                    </div>
                    <div className="login-form col-lg-5">
                        <div className="justify-content-end">
          
                        </div>
                    </div>
                </div>
            </div>
        )
    }

在 scss 中： 我设置了

.main-page {
  height: 100vh;
  width: 100vw;
}

在添加之前一切正常 与

return (
            <div className="carousel-outer">
            <Carousel showArrows={true} showThumbs={false} showStatus={false}>
                <div>
                    <p className="row center-lg learn-eng white-text">Выучи английский</p>
                    <p className="row center-lg easy-fast white-text">Легко и быстро!</p>
                    <p className="row center-lg go-abroad white-text">Для поездок за границу</p>
                    <img src={vacation}/>
                </div>
                <div>
                    <img src="assets/2.jpeg"/>
                </div>
                <div>
                    <img src="assets/3.jpeg"/>
                </div>
            </Carousel>
            </div>
        );

我尝试向 Carousel 添加样式：

.carousel .carousel-slider {
  max-width: 100%;
  max-height: 100%;
}

.carousel-style {
  height: auto;
  width: auto;
}

但是图像仍然在父容器之外。水平和垂直滚动有：

我该如何解决这个问题？
工作演示

Answer 1

我无法修改您的项目，但我做了一个示例。

提示：

.container {
  width: 100%;
}

.container .carousel .slide img {
  max-height: 100vh;
  width: auto; /*100vw*/
}

工作演示