在小屏幕上切掉图像的侧面

Question

我正在使用 Bootstrap，我的页面顶部有一个横幅 (1920*250px)。 横幅是响应式的（使用.img-responsive）。
在小屏幕（sm 和 xs）上，虽然我想切掉侧面，以便横幅具有 1140 像素的新基本宽度（我想将基本高度保持在 250 像素我希望图像表现得像它是 1140*250px 并且仍然可以响应），但我不知道该怎么做。
如有任何帮助，我将不胜感激。

编辑：这是对我想要的更好的解释：
我有一个 1920*250px 大的横幅。它在中心包含一个包含徽标的部分（1140*250px），我希望该部分始终完全可见，横幅的布局大致如下：http://i.imgur.com/kNBqEGD.jpg
该图像使用.img-responsive 进行响应，因此它可以随窗口调整大小。然而，在小屏幕上，带有标志的中心部分非常小，所以我想去掉装饰性的边片。剩余的中心部分仍需要响应，以便徽标保持完全可见。
http://i.imgur.com/RrEJgNt.jpg

Answer 1

如果可以绝对定位，可以使用css剪辑：

  img {
    position: absolute;
    clip: rect(0px,1530px,250px,390px);
  }

或者（可能是更明智的解决方案）您可以将其放在父容器中并隐藏溢出：

<div id="bannerContainer">
  <img src="blahblah.jpg" class="yourimage" alt="hi" />
</div>

#bannerContainer {
  width: 1140px;
  height: 250px;
  text-align: center;
  overflow: hidden;
}

Answer 2

在媒体查询中，您可以绝对定位图像并使用left: 50%; transform: translateX(-50%) 将其水平居中，同时保持原始高度。

.img-responsive { max-width: 100%; }

@media (max-width: 1000px) {
  .cropped {
    position: relative;
    height: 250px;
  }
  .cropped .img-responsive {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 150%;
  }
}

<div class="cropped"><img src="http://placehold.it/1920x250" class="img-responsive"></div>