From 93a4ece5e337e07f4448f2cc7205cd91311ab4c1 Mon Sep 17 00:00:00 2001
From: heikomat <heiko.mathes@gmail.com>
Date: Sun, 19 Jun 2022 14:02:53 +0200
Subject: [PATCH] add support for browsers that dont support the aspect-ratio
 css-property

---
 frontend/src/css/results.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/frontend/src/css/results.css b/frontend/src/css/results.css
index 1ab421c8d..1cb251cd0 100644
--- a/frontend/src/css/results.css
+++ b/frontend/src/css/results.css
@@ -479,3 +479,31 @@ body.chrome #photoprism .search-results .result {
 #photoprism .face-results .is-marker.is-invalid {
     opacity: 0.5;
 }
+
+/* old browser support */
+@supports not (aspect-ratio: 1) {
+  #photoprism .search-results .image-container {
+    height: 0;
+    padding-bottom: 100%;
+  }
+
+  #photoprism .cards-view .result .image,
+  #photoprism .list-view .result .image,
+  #photoprism .mosaic-view .result.image
+  {
+    height: 0;
+    /*
+       8px is required because this aspect-ratio-fallback doesn't take
+       margins into consideration
+    */
+    padding-bottom: calc(100% - 8px)
+  }
+
+  #photoprism .mosaic-view .result.is-selected {
+    /*
+       if it is selected then it has no more margin, so DON't subtract them
+       in that case
+    */
+    padding-bottom: 100%
+  }
+}