Added img-fluid mixin

Author: dmhendricks

README.md

@@ -50,7 +50,7 @@ You can make your own custom build of Bootstrap by downloading the source, makin
 Here is how you can accomplish what I have done here:
 
 1. Download and extract the Bootstrap [source files](http://v4-alpha.getbootstrap.com/getting-started/download/)
-2. Modify the SCSS files as desired. For example, to generate this build I added the `.bootstrap-wrapper` class to `scss/bootstrap-grid.scss` (lines 55 and 72), included the responsive utilities (line 63), and manually added the `.img-fluid` class (lines 66-71). In `scss/_variables.scss` I also enabled flex support on line 46.
+2. Modify the SCSS files as desired. For example, to generate this build I added the `.bootstrap-wrapper` class to `scss/bootstrap-grid.scss` (lines 55 and 69), included the responsive utilities (line 64) and `.img-fluid` class (lines 67-68). I also enabled flex support in `scss/_variables.scss` on line 46.
 3. Once you are done making your changes, use a program like [Koala](http://koala-app.com/) or Scout to compile the SCSS files into usable CSS files.
 
 As you can see, it is a very easy process to create your own customized Bootstrap build.

scss/bootstrap-grid.scss

@@ -57,16 +57,13 @@ $grid-gutter-width:          1.875rem !default; // 30px
 
   @import "mixins/clearfix";
   @import "mixins/breakpoints";
+  @import "mixins/image";
   @import "mixins/grid-framework";
   @import "mixins/grid";
 
   @import "utilities-responsive";
   @import "grid";
 
-  // Manually adding .img-fluid (formerly known as .img-responsive in Bootstrap 3) because it is so useful
-  .img-fluid {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
+  // Manually adding .img-fluid (formerly known as .img-responsive in Bootstrap 3)
+  .img-fluid { @include img-fluid(); }
 }

scss/mixins/_image.scss

@@ -0,0 +1,34 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid($display: block) {
+  display: $display;
+  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.
+
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+  background-image: url($file-1x);
+
+  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+  // but doesn't convert dppx=>dpi.
+  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+  // Compatibility info: http://caniuse.com/#feat=css-media-resolution
+  @media
+  only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+  only screen and (min-resolution: 2dppx) { // Standardized
+    background-image: url($file-2x);
+    background-size: $width-1x $height-1x;
+  }
+}