css: refrain from exploding tall image out of overlay preview

reintroduces occasional horizontal black bars / letterboxing
but artworks have a present-enough form in content area that
this should not cause real confusion over dimensions, which
is the main point of concern.

1 files changed, 6 insertions, 0 deletions

diff --git a/src/static/css/features.css b/src/static/css/features.css
index 8635c551..33a7b9c9 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -1565,6 +1565,9 @@
   }
 
   #image-overlay-content-container {
+    display: flex;
+    flex-direction: column;
+
     overflow: hidden;
   }
 
@@ -1579,6 +1582,7 @@
   #image-overlay-image-layout {
     display: block;
     position: relative;
+    max-height: 100%;
     margin: 4px 3px;
   }
 
@@ -1591,6 +1595,8 @@
 
   #image-overlay-image {
     position: absolute;
+    max-height: 100%;
+    object-fit: contain;
   }
 
   #image-overlay-container.no-thumb #image-overlay-image {