content, client: image-overlay: set thumb aspect ratio

Although the thumbnail image width automatically matches
the width of the main image, the height by default will
be a multiple of the thumbnail's own height, which may
result in a mismatched aspect ratio due to the much
lower accuracy of thumbnail intrinsic dimensions.

1 files changed, 19 insertions, 0 deletions

diff --git a/src/static/js/client/image-overlay.js b/src/static/js/client/image-overlay.js
index 8ff3e81c..13a891bd 100644
--- a/src/static/js/client/image-overlay.js
+++ b/src/static/js/client/image-overlay.js
@@ -159,6 +159,11 @@ function getImageLinkDetails(imageLink) {
       a.dataset.thumbs ??
       null,
 
+    dimensions:
+      img?.dataset.dimensions?.split('x') ??
+      a.dataset.dimensions?.split('x') ??
+      null,
+
     color:
       cssProp(imageLink, '--primary-color'),
   };
@@ -231,6 +236,20 @@ async function loadOverlayImage(details) {
   info.mainImage.dataset.displayingThumb = details.mainThumb;
   info.thumbImage.dataset.displayingThumb = details.thumbThubm;
 
+  if (details.dimensions) {
+    info.mainImage.width = details.dimensions[0];
+    info.mainImage.height = details.dimensions[1];
+    info.thumbImage.width = details.dimensions[0];
+    info.thumbImage.height = details.dimensions[1];
+    cssProp(info.thumbImage, 'aspect-ratio', details.dimensions.join('/'));
+  } else {
+    info.mainImage.removeAttribute('width');
+    info.mainImage.removeAttribute('height');
+    info.thumbImage.removeAttribute('width');
+    info.thumbImage.removeAttribute('height');
+    cssProp(info.thumbImage, 'aspect-ratio', null);
+  }
+
   info.mainImage.addEventListener('load', handleMainImageLoaded);
   info.mainImage.addEventListener('error', handleMainImageErrored);