// Image Mixins
// - Responsive image
// - Retina image


// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive() {
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}


// Retina image
//
// Short retina mixin for setting background-image and -size.
// See http://caniuse.com/#search=pixel-ratio
@mixin img-retina($file-1x, $file-2x, $width-1x:null, $height-1x:null) {
  // Use the image-path helper if they're relative paths
  @if not str-index($file-1x, '//') { $file-1x: image-path($file-1x); }
  @if not str-index($file-2x, '//') { $file-2x: image-path($file-2x); }

  background-image: url($file-1x);

  @media
  only screen and ( min-resolution: 192dpi),     // IE doesn't support dppx
  only screen and ( min-resolution: 2dppx) {     // Standard
    background-image: url($file-2x);
    background-size: $width-1x $height-1x;
  }
}