diff --git a/src/constants/media.ts b/src/constants/media.ts
index c124cced..9e48a117 100644
--- a/src/constants/media.ts
+++ b/src/constants/media.ts
@@ -9,5 +9,6 @@ export const AVATAR_MAX_PX = 256;
     screen, and a 64px source is soft at the top of that. */
 export const AVATAR_THUMB_PX = 128;
 
-/** The member card banner, 5:2. A 320px hover card at 3x is 960 across. */
-export const BANNER_BOX = { width: 960, height: 384, thumbWidth: 480, thumbHeight: 192 } as const;
+/** The member card's banner is 320 by 164 CSS px, so 3x of that. Any other shape and the card
+    crops and scales the stored picture again, so it stops matching what the editor showed. */
+export const BANNER_BOX = { width: 960, height: 492, thumbWidth: 480, thumbHeight: 246 } as const;
diff --git a/src/routes/bannerUpload.test.ts b/src/routes/bannerUpload.test.ts
index c5c98dbc..4bb4ef6b 100644
--- a/src/routes/bannerUpload.test.ts
+++ b/src/routes/bannerUpload.test.ts
@@ -9,6 +9,7 @@ import { after, before, describe, it } from "node:test";
 import express from "express";
 import sharp from "sharp";
 
+import { BANNER_BOX } from "../constants/media";
 import { initSqlite } from "../db/sqlite/connection";
 import { getFile } from "../db/sqlite/messages";
 import { createRoleDefinition } from "../db/sqlite/roleDefinitions";
@@ -100,8 +101,8 @@ describe("POST /api/uploads/banner", () => {
 
     const file = await getFile(fileId);
     assert.equal(file?.mime, "image/avif");
-    assert.equal(file?.width, 960);
-    assert.equal(file?.height, 384);
+    assert.equal(file?.width, BANNER_BOX.width);
+    assert.equal(file?.height, BANNER_BOX.height);
     assert.ok(file?.s3_key.startsWith("banners/"));
   });