feat(esl-image-utils): helper container classes for native img / pict…

…ure containers

src/modules/all.less

@@ -1,6 +1,7 @@
 @import './esl-utils/all.less';
 
 @import './esl-image/core.less';
+@import './esl-image-utils/all.less';
 @import './esl-media/core.less';
 
 @import './esl-scrollbar/core.less';

src/modules/esl-image-utils/all.less

@@ -0,0 +1 @@
+@import './core/esl-image-conyainer.less';

src/modules/esl-image-utils/core/esl-image-conyainer.less

@@ -0,0 +1,44 @@
+// Image Container Defaults
+.img-container {
+  position: relative;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &[lodaing='lazy'] {
+      opacity: 0;
+      .img-container-loaded & {
+        opacity: 1;
+        transition: opacity 0.4s;
+      }
+    }
+
+    &.img-cover {
+      object-fit: cover;
+    }
+    &.img-contain {
+      object-fit: contain;
+    }
+  }
+
+  &.img-container-1-1 {
+    aspect-ratio: 1;
+  }
+
+  &.img-container-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.img-container-16-9 {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+picture.img-container  {
+  display: block;
+}