From 07ac926c6c94a52015687673634fbcea5516f9b4 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Thu, 17 Jan 2019 18:07:42 +0100
Subject: Fi gallery display for FF 52 - better layout

---
 scss/custom.scss | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'scss/custom.scss')

diff --git a/scss/custom.scss b/scss/custom.scss
index 22f912879..5b5bb0a9d 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -555,13 +555,24 @@ ul.compact{
 }
 
 .thumb-image{
-    display: block;
-    position:relative;
-    overflow:hidden;
-    padding-bottom:100%;
+    height: 200px;
+    position: relative;
+    overflow: hidden;
 }
+
 .thumb-image img{
-    position:absolute;
+    display: inline-block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    position: absolute;
+    left: 50%; /* This sets left top corner of the image to the center of the block... */
+    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
+    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
 }
 
 /* lightgallery */
-- 
cgit v1.2.3