Cut away sides of image on small screens

问题

I'm using Bootstrap and I have a banner (1920*250px) across the top of my page. The banner is responsive (using .img-responsive).
On small screens (sm and xs) though I want to cut away the sides so that the banner has a new base width of 1140px (I want to keep the base height at 250px I want the image behave like it is 1140*250px and still be responsive), but I have no idea how to do that.
I'd be grateful for any help.

Edit: Here is a better explanation of what I want:
I have a banner that is 1920*250px big. It contains a section (1140*250px) in the center that contains a logo, I want this section always be entirely visible, the layout of the banner is roughly like this: http://i.imgur.com/kNBqEGD.jpg
The image is made responsive with .img-responsive, so that it resizes with the window. However, on small screens the center section with the logo is really small, so I want to get rid of the decorational side pieces. The remaining center section still needs to be responsive so that the logo remains fully visible.
http://i.imgur.com/RrEJgNt.jpg

回答1:

If it can be absolutely positioned, you could use a css clip:

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

Or (possibly a more sensible solution) you can put it in a parent container and hide overflow:

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

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

回答2:

In a media query, you can absolutely position the image and use left: 50%; transform: translateX(-50%) to center it horizontally while retaining the original height.

.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>

来源：https://stackoverflow.com/questions/43742957/cut-away-sides-of-image-on-small-screens