From 18de453ac15fb84f4cfd9a04490dc574205689d7 Mon Sep 17 00:00:00 2001
From: marijo <marijo@novosel.dk>
Date: Mon, 29 Jun 2026 08:20:03 +0000
Subject: [PATCH] Images not cropping

---
 app.js     |  7 ++-----
 index.html |  2 +-
 styles.css | 17 +++++++++++------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app.js b/app.js
index 7266d35..514c609 100644
--- a/app.js
+++ b/app.js
@@ -189,6 +189,7 @@ function renderRoutes() {
 function createRouteCard(route) {
   const card = template.content.firstElementChild.cloneNode(true);
   const image = card.querySelector(".route-image");
+  const picture = card.querySelector(".route-picture");
   const meta = card.querySelector(".route-meta");
   const title = card.querySelector(".route-title");
   const description = card.querySelector(".route-description");
@@ -205,7 +206,7 @@ function createRouteCard(route) {
 
   if (route.picture) {
     image.hidden = false;
-    image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`;
+    picture.src = route.picture;
   }
 
   return card;
@@ -428,7 +429,3 @@ function isValidUrl(value) {
 function formatDate(value) {
   return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00`));
 }
-
-function cssUrlEscape(value) {
-  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
-}
diff --git a/index.html b/index.html
index 6d4ce57..34d4a78 100644
--- a/index.html
+++ b/index.html
@@ -94,7 +94,7 @@
 
     <template id="route-card-template">
       <article class="route-card">
-        <div class="route-image" aria-hidden="true" hidden></div>
+        <div class="route-image" aria-hidden="true" hidden><img class="route-picture" alt="" /></div>
         <div class="route-content">
           <div class="route-meta"></div>
           <div class="route-top">
diff --git a/styles.css b/styles.css
index a5e5af2..e1775ea 100644
--- a/styles.css
+++ b/styles.css
@@ -231,11 +231,16 @@ textarea:focus {
 }
 
 .route-image {
-  min-height: 130px;
-  background-color: color-mix(in srgb, var(--border) 45%, transparent);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--border) 45%, transparent);
+}
+
+.route-picture {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
 .route-content {
@@ -398,7 +403,7 @@ textarea:focus {
   }
 
   .route-image {
-    min-height: 100%;
+    align-self: start;
   }
 }