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

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

# 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

$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

@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

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

MiguelDebruyne

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

MiguelDebruyne

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images.gif',
sizingMethod='scale')";

MiguelDebruyne

if(jQuery.browser)
	{
		/* SmileyWar.com Mobile Orientation Detection */

		// set rules on initial load and when the screen changes size or orientation.
		$(window).on("load resize",function(){
			var h = $(window).height();
			var w = $(window).width();

			if ( w < 768) {

MiguelDebruyne

function FastButton(element, handler) {
           this.element = element;
           this.handler = handler;
           element.addEventListener('touchstart', this, false);
        };
        FastButton.prototype.handleEvent = function(event) {
           switch (event.type) {
              case 'touchstart': this.onTouchStart(event); break;
              case 'touchmove': this.onTouchMove(event); break;
              case 'touchend': this.onClick(event); break;