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

Question

如果这是一个愚蠢的问题，请先抱歉；我对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>
);

如您所见，这三个显示它们的完整宽度，即使这会导致它们的高度不匹配并且不会占用横幅的整个高度。调整窗口大小时，此效果会变得更糟。相反，我想让这些图像全部占据横幅div的固定高度，并通过动态地裁剪其宽度保持backgroundSize的1/3-理想的同时保持它们居中。” >

我一直在寻找如何执行此操作的方法，但是找不到解决此特定用例的方法。有没有一种方法可以使用backgroundImage方法完成此操作，或者我将不得不重新实现它吗？

如果这是一个愚蠢的问题，请先抱歉；我对CSS不太满意。我正在研究react-bootstrap代码，该代码定义了一个包含三个图像的图像横幅，每个图像占用宽度的1/3：var ...

Answer 1

尝试使用网格。为了使其正常工作，您需要将三个图像包装在一个容器中，这将是您的横幅。这个容器比需要以下css：

Answer 2

您将需要分开背景。您可以尝试添加伪元素，这样就不必添加更多代码：