Uses CSS hack in order to make an element maintain the aspect ratio of supplied background-image. Demo: http://codepen.io/KATT/pen/yBrni

responsive-image.styl

// Uses CSS hack in order to make an element maintain the aspect ratio of supplied background-image
// Latest version available @ https://gist.github.com/KATT/8283246
// Demo @ http://codepen.io/KATT/pen/yBrni
responsive-image($image, $width = false, $height = false) {
  $external = match('^https?:\/\/', $image);

  error('expect width and height on external images') if $external and !($width or $height)

  unless $width and $height {
    $size = image-size($image);
    $width = $size[0];
    $height = $size[1];
  }
  if !$external and $public-image-path is defined {
    $image = $public-image-path + $image
  }


  box-sizing: content-box;
  padding-top: unit($height / $width*100, '%');
  background-image: url($image);
  background-repeat: no-repeat;
  background-size: $width $height;
  background-size: contain;

  if !$external and $public-image-path is defined and $retina is defined {
    $extension = extname($image);
    $image2x = pathjoin(dirname($image), basename($image, $extension) + '@2x' + $extension);


    @media $retina {
      background-image: url($image2x);
    }
  }
}

variables.styl

$public-image-path = '../images/';
$retina = 'all and (-webkit-min-device-pixel-ratio: 1.5)';