cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

            
          
!
            
              .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;}

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

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console