Adjust the display of small or thin/tall images

src/components/post/attachments/attachments.module.scss

@@ -41,21 +41,33 @@
 
 .visual__link {
   position: relative;
-  display: inline-flex;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-  transition: box-shadow 0.2s;
+  transition:
+    box-shadow 0.2s,
+    background-color 0.2s;
+  display: grid;
+  place-content: center;
+  overflow: clip;
+  background-color: rgba(128, 128, 128, 0.1);
 
   &:hover {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
+    background-color: rgba(192, 192, 192, 0.1);
   }
 }
 
 .container--sortable .visual__link {
   cursor: move;
 }
 
+.visual__image,
 .visual__video {
-  position: absolute;
+  grid-area: 1 / 1;
+}
+
+.visual__image {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
 }
 
 .visual__overlay {

src/components/post/attachments/visual-container.jsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { useRef, useMemo } from 'react';
 import { useEvent } from 'react-use-event-hook';
+import { clamp } from 'lodash-es';
 import { attachmentPreviewUrl } from '../../../services/api';
 import { openLightbox } from '../../../services/lightbox';
 import { lazyComponent } from '../../lazy-component';
@@ -27,7 +28,7 @@ export function VisualContainer({
   const containerRef = useRef(null);
   const containerWidth = useWidthOf(containerRef);
 
-  const ratios = attachments.map((a) => a.width / a.height);
+  const ratios = attachments.map((a) => clamp(a.width / a.height, 0.4, 2.5));
   let sizeRows = getGallerySizes(ratios, containerWidth - 1, thumbArea, gap);
 
   const singleImage = attachments.length === 1;

src/components/post/attachments/visual.jsx

@@ -8,6 +8,7 @@ import { Icon } from '../../fontawesome-icons';
 import { useMediaQuery } from '../../hooks/media-query';
 import style from './attachments.module.scss';
 import { NsfwCanvas } from './nsfw-canvas';
+import { fitIntoBox } from './geometry';
 
 export function VisualAttachment({
   attachment: att,
@@ -21,21 +22,23 @@ export function VisualAttachment({
   const nameAndSize = `${att.fileName} (${formatFileSize(att.fileSize)}, ${att.width}×${att.height}px)`;
   const alt = `${att.mediaType === 'image' ? 'Image' : 'Video'} attachment ${att.fileName}`;
 
-  const [prvWidth, setPrvWidth] = useState(width);
-  const [prvHeight, setPrvHeight] = useState(height);
+  const { width: mediaWidth, height: mediaHeight } = fitIntoBox(att, width, height);
+
+  const [prvWidth, setPrvWidth] = useState(mediaWidth);
+  const [prvHeight, setPrvHeight] = useState(mediaHeight);
 
   useLayoutEffect(() => {
     // Don't update preview URLs if the size hasn't changed by more than the minimum size difference
     const minSizeDifference = 40;
     if (
-      Math.abs(width - prvWidth) < minSizeDifference &&
-      Math.abs(height - prvHeight) < minSizeDifference
+      Math.abs(mediaWidth - prvWidth) < minSizeDifference &&
+      Math.abs(mediaHeight - prvHeight) < minSizeDifference
     ) {
       return;
     }
-    setPrvWidth(width);
-    setPrvHeight(height);
-  }, [prvWidth, prvHeight, width, height]);
+    setPrvWidth(mediaWidth);
+    setPrvHeight(mediaHeight);
+  }, [prvWidth, prvHeight, mediaWidth, mediaHeight]);
 
   const hiDpi = useMediaQuery('(min-resolution: 1.5x)') ? 2 : 1;
 
@@ -67,18 +70,20 @@ export function VisualAttachment({
       onClick={handleClick}
       target="_blank"
       data-pid={pictureId}
+      style={{ width, height }}
     >
       {/**
        * This image is used for the proper lightbox opening animation,
        * even if the attachment has 'video' type.
        */}
       <img
         id={pictureId}
+        className={style['visual__image']}
         src={imageSrc}
         alt={alt}
         loading="lazy"
-        width={width}
-        height={height}
+        width={mediaWidth}
+        height={mediaHeight}
         aria-hidden={att.mediaType === 'video'}
       />
       {att.mediaType === 'video' && (
@@ -89,8 +94,8 @@ export function VisualAttachment({
             poster={imageSrc}
             alt={alt}
             loading="lazy"
-            width={width}
-            height={height}
+            width={mediaWidth}
+            height={mediaHeight}
             preload="none"
             muted
             loop