From d55cd821b51a2a5c408191ee012936132b30c891 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Fri, 5 Dec 2025 11:35:22 +0000
Subject: [PATCH] .

---
 cards/templates/cards/base.html | 15 ++++++++++-----
 templates/cards/base.html       | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/cards/templates/cards/base.html b/cards/templates/cards/base.html
index d367311..8238fe9 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -33,13 +33,18 @@
       #theme-toggle{margin-left:0.5rem}
       /* Top Trumps card styles */
       .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
-      .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center}
+      .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
       /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
       .toptrump-card .hero-image img.card-hero-img{
-        display:block;
-        margin:8px auto 0;
-        width:92%;
-        height:140px;
+        position:absolute;
+        left:50%;
+        top:50%;
+        transform:translate(-50%,-50%);
+        /* ensure the image fills the banner while keeping aspect ratio */
+        min-width:110%;
+        min-height:110%;
+        width:auto;
+        height:auto;
         object-fit:cover;
         border-radius:6px;
         box-shadow:none;
diff --git a/templates/cards/base.html b/templates/cards/base.html
index 0123465..05d65a0 100644
--- a/templates/cards/base.html
+++ b/templates/cards/base.html
@@ -33,13 +33,18 @@
       #theme-toggle{margin-left:0.5rem}
       /* Top Trumps card styles */
       .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
-      .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center}
+      .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
       /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
       .toptrump-card .hero-image img.card-hero-img{
-        display:block;
-        margin:8px auto 0;
-        width:92%;
-        height:140px;
+        position:absolute;
+        left:50%;
+        top:50%;
+        transform:translate(-50%,-50%);
+        /* ensure the image fills the banner while keeping aspect ratio */
+        min-width:110%;
+        min-height:110%;
+        width:auto;
+        height:auto;
         object-fit:cover;
         border-radius:6px;
         box-shadow:none;