LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Crop Top - Responsive Cropping

Option Three: Hybrid Approach

The img has visibility: hidden, the background-image has background-position: center center.
wedding
opacity: 0. A background-image you can drag or right-click to save. Works in IE8 (with help).
wedding
Here, a 70 KB half-scale img is holding the space for the higher-res background-image. background-position: 30% 60%
Paceholder img 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.
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;}
JS

  

Host Instantly Drag and Drop Website Builder

 

Description

Sometimes you want an image to resize responsively but restrict its height — cropping it then as it widens. This hybrid option uses both an img and background-image, trying for the best of both worlds.
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID