Fixed and Fluid Ratios

fixed-and-fluid-ratios.css

/**
 * FIXED and FLUID RATIOs
 * http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
 */


/**
 * FIXED RATIO
  <div class="column">
    <figure class="fixedratio"></figure>
  </div>
 */

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */

  background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}


/**
 * FLUID RATIO
  <div class="column">
    <figure class="fluidratio"></figure>
  </div>
 */

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}


/**
 * FLUID RATIO Sass Mixin
  <div class="column">
    <figure class="fluidratio"></figure>
  </div>
 */
 
/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
  $width-large: nth($large-size, 1);
  $width-small: nth($small-size, 1);
  $height-large: nth($large-size, 2);
  $height-small: nth($small-size, 2);
  $slope: ($height-large - $height-small) / ($width-large - $width-small);
  $height: $height-small - $width-small * $slope;

  padding-top: percentage($slope);
  height: $height;

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

/* usage */
figure.fluidratio {
  /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
  @include fluid-ratio(800px 200px, 300px 150px);

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}


/**
 * FIXED RATIO Sass Mixin
  <div class="column">
    <figure class="fixedratio"></figure>
  </div>
 */

@mixin fixed-ratio($size) {
  $width:  nth($size, 1);
  $height: nth($size, 2);
  $slope: $height / $width;

  padding-top: percentage($slope);

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

/* usage */
figure.fixedratio {
  @include fixed-ratio(800px 200px);

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}