Css 反应转盘-不同宽度的图像显示错误

我有一个URL数组，作为幻灯片组件的道具传入。使用有状态索引一次只能传递一个URL。无论何时单击右按钮，索引都会增加1，反之亦然。这将用于显示数组中的下一个URL；然而，即使我在背景上没有设置“重复”，图像似乎也在重复。这是因为图像的宽度不同，有些图像比上一个图像小。我尝试将父容器设置为设置的宽度，以便幻灯片类的宽度为父容器的100%，但这似乎对我不起作用。下面是我正在使用的两个组件和样式文件

//Parent carousel component
const HeroImage = ({state}) => {
    const [index, setIndex] = useState(0);
    var imgUrls = [];

    const goToPrevSlide = () => {
        setIndex(index - 1);
    }
    const goToNextSlide = () => {
        setIndex(index + 1);
    }

    return(
        <React.Fragment>
            <StyledHeroImage>
                <div className="slider-wrapper">
                        {state.heroImage.map(image => {
                            imgUrls.push(`${IMAGE_BASE_URL}${BACKDROP_SIZE}${image.backdrop_path}`);
                        })}
                        <Slide title={state.heroImage.original_title} text={state.heroImage.overview} image={imgUrls[index]}/>
                </div>

                <LeftArrow goToPrevSlide={goToPrevSlide}/>
                <RightArrow goToNextSlide={goToNextSlide}/>
            </StyledHeroImage>
        </React.Fragment>
    )
}

//child Slide Component
const Slide = ({image, text, title}) => {
    const styles = {
        background: `linear-gradient(to bottom, rgba(0,0,0,0) 39%, rgba(0,0,0,0) 41%, rgba(0,0,0,0.65) 100%), url(${image})`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
    }
    return(
    <div className="slide" style={styles}>
        <div className="heroimage-content">
            <div className="heroimage-text">
                <h1>{title}</h1>
                <p>{text}</p>
            </div>
        </div>
    </div>     
    )
}

//Styles file
export const StyledHeroImage = styled.div`
    height: 650px;
    width: 100%;
    margin: 0 auto;

    .slider-wrapper{
        height: 100%;
        width: 100%;
    }

    .slide{
        width: 100%;
        height: 100%;
    }

    .arrow{
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f9f9f9;
        border-radius: 50%;
        cursor: pointer;
        transition: transform ease-in .1s;
    }

    .nextArrow {
        position: absolute;
        top: 50%;
        right: 25px;
        z-index: 999;
        color: #fff;
      }

      .backArrow {
        position: absolute;
        top: 50%;
        left: 25px;
        z-index: 999;
        color: #fff;
      }

      .fa-arrow-right:before, .fa-arrow-left:before {
        color: #222
      }
`;

//父旋转木马组件
常量图像=（{state}）=>{
const[index，setIndex]=useState（0）；
var imgUrls=[]；
常量gotoprevsiled=（）=>{
setIndex（索引-1）；
}
const goToNextSlide=（）=>{
setIndex（index+1）；
}
返回(
{state.hegomage.map（图像=>{
push（`IMAGE\u BASE\u URL}${background\u SIZE}${IMAGE.background\u path}`）；
})}
)
}
//子幻灯片组件
常量幻灯片=（{图像、文本、标题}）=>{
常量样式={
背景：`线性梯度（到底部，rgba（0,0,0,0）39%，rgba（0,0,0,0）41%，rgba（0,0,0,0.65）100%，url（${image}）`，
背景尺寸：'封面'，
背景重复：“不重复”，
背景位置:"中锋",，
}
返回(
{title}
{text}

)
}
//样式文件
export const StyledHeroImage=styled.div`
高度：650px；
宽度：100%；
保证金：0自动；
.滑块包装器{
身高：100%；
宽度：100%；
}
.幻灯片{
宽度：100%；
身高：100%；
}
.阿罗{
高度：50px；
宽度：50px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景#f9f9f9；
边界半径：50%；
光标：指针；
转换：在0.1s内轻松转换；
}
下一个塔罗{
位置：绝对位置；
最高：50%；
右：25px；
z指数：999；
颜色：#fff；
}
.反箭头{
位置：绝对位置；
最高：50%；
左：25px；
z指数：999；
颜色：#fff；
}
.fa箭头右：之前.fa箭头左：之前{
颜色：#222
}
`;

尝试向图像中添加

对象适合度：封面

。不幸的是，这没有效果。