src/scss/bootstrap-4.0.0-alpha.6/scss/mixins/_image.scss

   1 // Image Mixins
   2 // - Responsive image
   3 // - Retina image
   4
   5
   6 // Responsive image
   7 //
   8 // Keep images from scaling beyond the width of their parents.
   9
  10 @mixin img-fluid {
  11   // Part 1: Set a maximum relative to the parent
  12   max-width: 100%;
  13   // Part 2: Override the height to auto, otherwise images will be stretched
  14   // when setting a width and height attribute on the img element.
  15   height: auto;
  16 }
  17
  18
  19 // Retina image
  20 //
  21 // Short retina mixin for setting background-image and -size.
  22
  23 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  24   background-image: url($file-1x);
  25
  26   // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
  27   // but doesn't convert dppx=>dpi.
  28   // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
  29   // Compatibility info: http://caniuse.com/#feat=css-media-resolution
  30   @media
  31   only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
  32   only screen and (min-resolution: 2dppx) { // Standardized
  33     background-image: url($file-2x);
  34     background-size: $width-1x $height-1x;
  35   }
  36 }