responsive-full-width-image.styl

// declare in your variables-file
$relative-image-path = '../images/';
$retina = '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)';



responsive-image($image) {
  $path = $relative-image-path + $image;

  $ext = extname($path);
  $path2x = pathjoin(dirname($path), basename($path, $ext) + '@2x' + $ext);

  box-sizing: content-box;

  max-width: 100%;
  $size = image-size($path);

  padding-top: unit(($size[1] / $size[0])*100, '%');
  background-image: url($path);
  background-repeat: no-repeat;
  background-size: contain;

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