Added

image fit Enhanced image cover added aspect control
2017-04-05 09:24:14 +02:00
parent 4ae77bdc87
commit 426dde5b61
5 changed files with 128 additions and 2 deletions
@@ -0,0 +1,38 @@
+@mixin image-fit($heightaspect) {
+  /* image fit */
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  text-align: center;
+
+  img {
+    position: absolute;
+    object-fit: fill !important;
+
+    width: auto;
+    height: auto;
+
+    max-width: 100%;
+    max-height: 100%;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    &.landscape {
+      min-width: 100%;
+      height: auto;
+    }
+
+    &.portrait {
+      min-height: 100%;
+      width: auto;
+    }
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    padding-bottom: 100% * $heightaspect;
+  }
+}