Html 如何仅显示宽图像的中心，该中心将根据屏幕大小而变化

这是三幅宽图像，总计2911px。现在举例来说，当屏幕是2000px宽时，我只想显示上面2911px的中心，如果它更小，我希望它更小，而不必担心图像的左/右隐藏。我不知道怎么做

我已经为您创建了一个演示，提供了一个可能的解决方案，请检查：

相关CSS代码：

<div style="width: 2911px height: 300px">
    <img style="float:left" src="../img/header1.jpg">
    <img style="float:left" src="../img/header2.jpg">
    <img style="float:left" src="../img/header3.jpg">
</div>

div{
    width: 600px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

img{
    float: left;
    width: 200px;
}