From 144a63a5c883e6bd1e28deff301262eb5efc80e5 Mon Sep 17 00:00:00 2001
From: brecert <me@bree.dev>
Date: Fri, 6 Aug 2021 12:39:23 -0400
Subject: [PATCH] Improve image embed scaling.

- fixes #15
---
 .../common/messaging/attachments/Grid.tsx     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index 8a461595..515058a3 100644
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/src/components/common/messaging/attachments/Grid.tsx
@@ -4,24 +4,26 @@ import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div`
     display: grid;
-    overflow: hidden;
 
-    max-width: min(var(--attachment-max-width), 100%, var(--width));
-    max-height: min(var(--attachment-max-height), var(--height));
     aspect-ratio: var(--aspect-ratio);
 
-    img,
-    video {
-        min-width: 100%;
-        min-height: 100%;
+    max-width: min(100%, var(--width), var(--attachment-max-width));
+    max-height: min(var(--height), var(--attachment-max-height));
 
-        width: auto;
-        height: auto;
+    img, video {
+        grid-area: 1 / 1;
+        
+        display: block;
 
         max-width: 100%;
         max-height: 100%;
 
-        grid-area: 1 / 1;
+        object-fit: contain;
+    }
+
+    video {
+        width: 100%;
+        height: 100%;
     }
 
     &.spoiler {
@@ -56,7 +58,7 @@ export function SizedGrid(props: Props) {
                 ...style,
                 "--width": `${width}px`,
                 "--height": `${height}px`,
-                "--aspect-ratio": width / height,
+                "--aspect-ratio": `${width} / ${height}`,
             }}>
             {children}
         </Grid>