Rename .img-responsive class to .img-fluid

Fix #17166

scss/_carousel.scss

@@ -16,7 +16,7 @@
     // Account for jankitude on images
     > img,
     > a > img {
-      @extend .img-responsive;
+      @extend .img-fluid;
       line-height: 1;
     }
 

scss/_images.scss

@@ -1,6 +1,6 @@
 // Responsive images (ensure images don't scale beyond their parents)
-.img-responsive {
-  @include img-responsive();
+.img-fluid {
+  @include img-fluid();
 }
 
 // Rounded corners
@@ -19,7 +19,7 @@
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));
 
   // Keep them at most 100% wide
-  @include img-responsive(inline-block);
+  @include img-fluid(inline-block);
 }
 
 // Perfect circle

scss/_type.scss

@@ -175,7 +175,7 @@ mark,
   display: inline-block;
 
   > img {
-    @extend .img-responsive;
+    @extend .img-fluid;
     margin-bottom: ($spacer-y / 2);
     line-height: 1;
   }

scss/mixins/_image.scss

@@ -7,7 +7,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@mixin img-responsive($display: block) {
+@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