when I reduce my screen size, the image in the slider is cut off

here's the image : enter image description here

 import 'react-slideshow-image/dist/styles.css'

                  <Slide easing="ease">
                        <div className="each-slide">
                            <div style={{'backgroundImage': `url(${slideImages[0]})`}}>
                            </div>
                        </div>
                        <div className="each-slide">
                            <div style={{'backgroundImage': `url(${slideImages[1]})`}}>
                            </div>
                        </div>
                      
                    </Slide>

css code

.each-slide > div{

   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   height: 350px;
   width:100%;

}

CodePudding user response：

try this

.each-slide{
   width:100vw;
   height:100vh;
}

.each-slide > div{
   width:100%;
   height:100%;
}

this will work, you don't need to use flex unless you want to align things inside the div.