MiguelDebruyne

<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

MiguelDebruyne

.block {
  text-align: center;
}
 
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;

MiguelDebruyne

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));

MiguelDebruyne

$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize

@import "my-icons/*.png";

$my-icons-sprite-dimensions: true;

@include all-my-icons-sprites;

// the fun part

MiguelDebruyne

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
    # Note: Compass outputs both with and without random hash images.
    # To not keep the one with hash, add: (Thanks to RaphaelDDL for this)
    FileUtils.rm_rf(filename)
  end
end
 

MiguelDebruyne

// Returns $list as a string
// -------------------------------------------------------------------------------
// @documentation http://sassylists.com/documentation/#debug
// -------------------------------------------------------------------------------
// @example debug(a b c d e)   => [ a, b, c, d, e ]
// @example debug(a b (c d e)) => [ a, b, [ c, d, e ] ]
// -------------------------------------------------------------------------------
// @param $list [List] : list
// @param $pre [Boolean] : enable/disable variables type and proper indentation
// @param $level [Number] : internal variable for recursivity

MiguelDebruyne

The way around this is so set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead. To do this you have to divide the width by the height and multiply by 100. This is the percentage of width to height which is then applied to the bottom padding as a percentage to reveal the image and will now keep the aspect ratio of the image and the element it is applied to consistent at all widths. You’ll also need to use background-size: 100% to keep the image the same size as the element.


<a class="background" href="#">Background Image Applied Here</a>

.background {
    display: block;
    height: 0;
    padding-bottom: 62.571428571429%;
    background: url(image.jpg) no-repeat;

MiguelDebruyne

:lang(af){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(ak){font-family:Lucida,"DejaVu Sans",inherit;}
:lang(ar){font-family:Tahoma 12,Nazli,KacstOne,"DejaVu Sans",inherit;}
:lang(bg){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(bn){font-family:FreeSans,MuktiNarrow,Vrinda,inherit;font-size:1.1em;line-height:1.4em;}
:lang(cs){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(da){quotes:'\00BB' '\00AB' '\203A' '\2039';}
:lang(de){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(el){font-family:"DejaVu Sans",inherit;quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}

MiguelDebruyne

function Interval (fn, time)
{
    var timer = false;

    this.start = function () {
        if (!this.isRunning()) {
            timer = setInterval(fn, time);
        }
    };

MiguelDebruyne

/* This parent can be any width and height */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;