Clipping A Responsive Full Width Image

I have to clip an image which spans full width. The following things didnt work for me clip: this requires position absolute so the block elements dont stack below background-posi

Solution 1:

Try this:

HTML

<divclass="banner"><divclass="bannerImg"></div></div>

CSS

.banner {
  position: relative;
  padding-bottom: 15%;
}

.bannerImg {
  background-image: url(...);
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

(Also here: http://jsfiddle.net/N6mCw/)

The idea is to use the outer wrapper to crop the image. If you need to support IE<9 then instead of a background image you'll have to add an <img> tag within the inner div and remove the background-image CSS:

<divclass="banner"><divclass="bannerImg"><imgsrc"…" /></div></div>

Although… the best way to do this would be to actually crop the image to the correct aspect ratio beforehand!