fix: IOTA - aspect ratio on safari (#41)

* feat: IOTA - Update all post header images to use aspect ratio 16:9 (#52) * fix aspect ratio for safari --------- Co-authored-by: evavirseda <[email protected]>
boxfish-studio · Jul 28, 2023 · 78d44fb · 78d44fb
1 parent ab3b1dd
commit 78d44fb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss
@@ -95,6 +95,20 @@
     aspect-ratio: 16/9;
 }
 
+@supports not (aspect-ratio: 16/9) {
+    .m-article-card__picture {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .m-article-card__picture{
+        content: "";
+        display: block;
+        padding-top: 56.25%;
+    }
+
+}
+
 .m-article-card__picture-link {
     position: absolute;
     top: 0;

diff --git a/src/sass/post.scss b/src/sass/post.scss
@@ -31,7 +31,23 @@
         margin-top: 65px;
     }
 }
+@supports not (aspect-ratio: 16/9) {
+    .post-template .m-hero.with-picture {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .post-template .m-hero.with-picture{
+        content: "";
+        display: block;
+        padding-top: 56.25%;
+    }
 
+    .post-template .m-hero.with-picture img {
+        object-fit: fill;
+    }
+
+}
 .disclamer-deprecated-post {
     margin: 30px 0;
     padding: 15px 20px;