CodePen

HTML

            
              <!-- http://css-tricks.com/crop-top/ -->

<div class="page-wrap">
  
  <h1>Crop Top - Responsive Cropping</h1>
  <h2>Option One: background-image</h2>

  <figure>
    <div class="bg-image bg-image-wedding bg-center-bottom">
    </div>
    <figcaption>
      The happy couple, front and center.
    </figcaption>
  </figure>
  
  <figure>  
    <div class="bg-image bg-image-wedding bg-center-center">
    </div>
    <figcaption>
      That's me in the middle.
    </figcaption>
  </figure>

  <figure>  
    <div class="background">
    </div>
    <figcaption>
      The "padding trick" thanks to Corey Worrell - height is not restrained, though.
    </figcaption>
  </figure>

</div> <!-- end .page-wrap -->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .bg-image {
	/* image specified in seperate class  */
	height: 240px;
	width: 100%; }

.bg-image-wedding {
	background-image: url(http://parkerbennett.com/croptop/img/photo-wedding_1200x800.jpg);
	/* lt ie8 */
	-ms-background-position-x: center;
	-ms-background-position-y: bottom;
	/* default - may override with classes or media query */
	background-position: center bottom;
	/* scale bg image proportionately */
	background-size: cover;
	/* ie8 polyfill */
	-ms-behavior: url(backgroundsize.min.htc);
	/* prevent scaling past src width (or not) */
	/* max-width: 1200px; */ }

.bg-center-center {
	-ms-background-position-x: center;
	-ms-background-position-y: center;
	background-position: center center; }

/* the "padding trick" thanks to Corey Worrell */
.background {
    height:0; 
    padding-bottom:40%;
    background-image: url(http://parkerbennett.com/croptop/img/photo-wedding_1200x800.jpg);
    background-position: center bottom;
	  /* scale bg image proportionately */
	  background-size: cover; /* or 100% */
}


/* example media query */
@media only screen and (min-width : 768px) {

	.bg-image { height: 320px; }
}

@media only screen and (min-width : 1200px) {

	.bg-image { height: 400px; }
}


/* presentational CSS below */

.page-wrap { 
  padding: .5em 2em 2em;}

h2 { 
  margin-top: -.5em; 
  font-style: italic; }

figure {
	margin: 2em 0; }

figcaption {
	margin: .5em 0;
	font-size: 85%;
	font-style: italic;
	color: #888; }

code {
  background: #fffe0;
  padding: 0 .25em; }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              <!-- CSS media query support for older IE - goes after CSS -->
  <!--[if lt IE 9]>

          <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>

  <![endif]-->

<!-- another option: //css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js -->

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................