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

Solution 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;
}

Solution 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%;
  }
}

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