CodePen

HTML

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

<div class="page-wrap">
  
  <h1>Crop Top - Responsive Cropping</h1>
  <h2>Option Three: Hybrid Approach</h2>
  
  <figure>
    <div class="crop-height bg-image-wedding bg-center-center">
      <img class="scale invisible" src="http://parkerbennett.com/croptop/img/photo-wedding_1200x800.jpg" alt="wedding" />
    </div> <!-- end .crop-height -->
    <figcaption>
      The img has <code>visibility: hidden</code>, the background-image has <code>background-position: center center</code>.  
    </figcaption>
  </figure>
  
  <figure>
    <div class="crop-height bg-image-wedding">
      <img class="scale transparent" src="http://parkerbennett.com/croptop/img/photo-wedding_1200x800.jpg" alt="wedding" />
    </div> <!-- end .crop-height -->
    <figcaption>
      <code>opacity: 0</code>. A background-image you can drag or right-click to save. Works in IE8 (with help).
    </figcaption>
  </figure>

  <figure>
    <div class="crop-height bg-image-wedding bg-position-wedding">
      <img class="scale transparent" height="800px" width="1200px" src="http://parkerbennett.com/croptop/img/photo-wedding_600x400.jpg" alt="wedding" />
    </div> <!-- end .crop-height -->
    <figcaption>
      Here, a 70 KB half-scale <code>img</code> is holding the space for the higher-res <code>background-image</code>. <code>background-position: 30% 60%</code>
    </figcaption>
  </figure>

    <figure>
    <div class="crop-height bg-image-wedding bg-position-wedding">
      <img class="scale" height="200px" width="300px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
    </div> <!-- end .bg-image-wedding -->
    <figcaption>
      Paceholder <code>img</code> can be a transparent pixel (some IE 7 help needed), but it will scale down as a square. You can't set a different aspect-ratio declaring height and width. Also, less user- and SEO-friendly.
    </figcaption>
  </figure>
</div> <!-- end .page-wrap -->

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .crop-height {
  /* max-width: 1200px; /* native or declared width of img src (if known) */
	max-height: 320px;
	overflow: hidden; }

img.scale {
  /* corrects small inline gap at bottom of containing div */
	display: block; 
  width: 100%; /* corrects obscure Firefox bug */
	max-width: 100%;
	/* just in case, to force correct aspect ratio */
	height: auto !important;
  display: block; /* corrects small inline gap at bottom of containing div */
  width: 100% /* corrects obscure Firefox bug */
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  /*width: auto\9; 
  /* ie8+9 - use modernizr instead of this \9 hack */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic;
	/* optionally force a minimum size if img src size is known: */
	/* min-height: 320px; /* max-height of .crop-height */
	/* min-width: 480px; /* proportional to above */ }

.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 - https://github.com/louisremi/background-size-polyfill */
	-ms-behavior: url(backgroundsize.min.htc);
	/* prevent scaling past src width (or not) */
	/* max-width: 1200px; */ }

.bg-center-bottom {
  /* lt ie8 if needed */
	/* -ms-background-position-x: center;
	-ms-background-position-y: bottom; */
	background-position: center bottom;
}

.bg-center-center {
  /* lt ie8 if needed */
	/* -ms-background-position-x: center;
	-ms-background-position-y: center; */
	background-position: center center;
}

.bg-position-wedding {
  /* background position for specific image */
  /* lt ie8 if needed */
	/* -ms-background-position-x: 30%;
	-ms-background-position-y: 60%; */
	background-position: 30% 60%;
}

.invisible {
  visibility: hidden; }

/* opacity allows user-friendly image saving */
.transparent {
  /* trigger hasLayout for ie filters below */
	zoom: 1;
  /* 0 opacity in ms filters still displays layout */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
  filter: alpha(opacity=0);
 	opacity: 0; }

/* example media query for smaller non-retina  */
@media
    only screen and (max-device-width : 600px) and (-webkit-max-device-pixel-ratio: 1),
    only screen and (max-device-width : 600px) and (max-device-pixel-ratio: 1) {

        /* half-sized "proxy" img */
        background-image: url(img/photo-wedding_600x400.jpg);
}

/* example media query, larger retina devices */
@media
    only screen and (min-device-width : 768px) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-width : 768px) and (        min-device-pixel-ratio: 1.5) {

    .bg-image-wedding {
        /* 1.5x larger */
        background-image: url(http://img/photo-wedding_1200x800@1.5x.jpg); }
}


/* 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 { 
  color: #808080;
  background: #ffffe0;
  padding: 0 .25em; 
  font-style: normal;}

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