3个背景图像,每个背景图像占横幅的1/3,如何在固定高度的同时响应地裁剪每个宽度

如果这是一个愚蠢的问题,请提前抱歉。我对CSS不太满意。

我正在使用react-bootstrap代码定义一个带有三个图像的图像横幅,每个图像占据宽度的1/3:

var bannerStyle = {
    backgroundImage: `url(${picture1}), url(${picture2}), url(${picture3})`,
    backgroundSize: "33.333333%",
    backgroundPosition: "top left, top center, top right",
};
return (
    <div className="inner-banner text-center" style={bannerStyle}>
        <div className="container">
            <div className="box"></div>
        </div>
    </div>
);

enter image description here

As you can see, the three display their full width, even if that results in their heights being mismatched and not taking up the full height of the banner. This effect becomes worse as the window is resized. I want to, instead, make these images all occupy the fixed height of the banner div, and maintain their 1/3 of backgroundSize by cropping their width - ideally while keeping them centered.

I've been looking around for how to do this, but can't find something that addresses this specific use case. Is there a way to accomplish this using the backgroundImage method or will I have to re-implement this?