configurable image fit in all image views

Signed-off-by: Vladimir Mandic <mandic00@live.com>

javascript/imageViewer.js

@@ -3,6 +3,18 @@ let previewDrag = false;
 let modalPreviewZone;
 let previewInstance;
 
+function cycleImageFit() {
+  const root = document.documentElement;
+  const current = getComputedStyle(root).getPropertyValue('--sd-image-fit').trim();
+  let next = 'contain';
+  if (current === 'contain') next = 'cover';
+  else if (current === 'cover') next = 'fill';
+  else if (current === 'fill') next = 'scale-down';
+  else if (current === 'scale-down') next = 'none';
+  root.style.setProperty('--sd-image-fit', next);
+  log('cycleImageFit', current, next);
+}
+
 function closeModal(evt, force = false) {
   if (force) gradioApp().getElementById('lightboxModal').style.display = 'none';
   if (previewDrag) return;

javascript/sdnext.css

@@ -14,6 +14,7 @@
   --color-trace: #666666;
   --color-warning: #FF9900;
   --left-column: 530px;
+  --sd-image-fit: contain;
 }
 
 a {
@@ -515,17 +516,36 @@ color: var(--primary-500) !important
   color: var(--body-text-color-subdued) !important
 }
 
+.gradio-gallery img, .image-container img {
+  max-width: 100%;
+  object-position: top;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--sd-image-fit) !important;
+}
+
 .interrogate {
   background: none !important;
   font-size: 1.5em !important;
   max-width: fit-content;
   position: absolute;
   right: 2.8em;
-  top: 0.2em;
+  top: 0.1em;
   z-index: 50;
 }
 
-.interrogate:hover {
+.image-fit {
+  background: none !important;
+  font-size: 1.5em !important;
+  max-width: fit-content;
+  position: absolute;
+  right: 4.0em;
+  top: 0.1em;
+  z-index: 50;
+}
+
+.interrogate:hover,
+.image-fit:hover {
   background: var(--button-primary-background-fill-hover) !important;
 }