Change Docs image sizes and add object-fit support

3 files changed, 15 insertions, 13 deletions

diff --git a/src/carousels.less b/src/carousels.less
index 52205ab..a682353 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -105,16 +105,6 @@
   }
 }
 
-@supports (object-fit: cover) {
-  .carousel-item {
-    img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-}
-
 @keyframes carousel-slidein {
   0% {
     transform: translateX(100%);
diff --git a/src/media.less b/src/media.less
index 02c7be5..fcd22e0 100644
--- a/src/media.less
+++ b/src/media.less
@@ -5,6 +5,17 @@
   max-width: 100%;
 }
 
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
 .video-responsive {
   display: block;
   overflow: hidden;
@@ -15,7 +26,7 @@
   &::before {
     content: "";
     display: block;
-    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
   }
 
   iframe,
@@ -38,13 +49,13 @@
 
 .video-responsive-4-3 {
   &::before {
-    padding-bottom: 75%; /* 4:3 */
+    padding-bottom: 75%; // Ratio 4:3
   }
 }
 
 .video-responsive-1-1 {
   &::before {
-    padding-bottom: 100%; /* 1:1 */
+    padding-bottom: 100%; // Ratio 1:1
   }
 }
 
diff --git a/src/utilities.less b/src/utilities.less
index 0f9e959..5541243 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -69,6 +69,7 @@
   margin-right: auto;
 }
 
+// Spacing
 .mt-10 {
   margin-top: 1rem;
 }