全宽标题响应图像，左和右;右溢

Question

我想放置一个全宽度的图像（想象一下像标题或滑块），但我想只显示图像的中心，除非视口大于图像必须放大。

一些详细的例子：

1. 我的图片是2000x200px
2. 在1600px宽度的屏幕中，我想显示我的图像的中央1600像素，没有调整大小。
3. 在450px的屏幕中，我想显示我的图像的中央1600像素，但缩小（调整大小）
4. 在一个1900像素的屏幕上，我想显示我的图像的中央1900像素，没有调整大小。
5. 在2500px的屏幕中，我想要显示我的图像的全宽2000像素，当然，放大了。

到目前为止我所拥有的：

• 制作响应式图像非常容易

#header-img {
  width: 100%;
  height: auto;
}

但它始终显示完整的图像。除非客户端屏幕的分辨率非常大，否则我不想显示左边和右边的块。

• 另一方面，可以完成“溢出”行为，将图像设置为div的背景，并将 background-size 属性设置为 cover ，但它没有响应。

<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />

我需要这两种行为。也许我需要媒体查询，但我试图避免它。我不想要任何javascript代码，只有CSS。

我在某些页面中看到过这种行为，但目前我找不到任何内容。

编辑：一张图片说千言万语

http://tomascrespo.sofiytommy.com/wp-content/uploads/2015/08/pregunta.jpg

观察到数字7和8仅在超宽屏幕中显示