From f59090936e5ddbc4da28383405c4358cc40c1c04 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 27 Feb 2025 10:12:29 +0000
Subject: [PATCH] Merged in fix/teasercard-image-fill (pull request #1425)

feat:teasercard - image fill fix

* feat:teasercard - image fill fix


Approved-by: Erik Tiekstra
---
 .../TempDesignSystem/TeaserCard/index.tsx     | 25 +++++++------------
 .../TeaserCard/teaserCard.module.css          |  6 +++++
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
index cce965e89..60995e00e 100644
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
@@ -25,25 +25,18 @@ export default function TeaserCard({
 }: TeaserCardProps) {
   const classNames = teaserCardVariants({ intent, alwaysStack, className })
 
-  const imageWidth =
-    image &&
-    Math.ceil(
-      image.dimensions.aspectRatio >= 1
-        ? image.dimensions.aspectRatio * 200
-        : 200 / image.dimensions.aspectRatio
-    )
-
   return (
     <article className={classNames}>
       {image && (
-        <Image
-          src={image.url}
-          alt={image.meta?.alt || ""}
-          className={styles.image}
-          width={imageWidth}
-          height={200}
-          focalPoint={image.focalPoint}
-        />
+        <div className={styles.imageContainer}>
+          <Image
+            src={image.url}
+            alt={image.meta?.alt || ""}
+            className={styles.image}
+            focalPoint={image.focalPoint}
+            fill
+          />
+        </div>
       )}
       <div className={styles.content}>
         <Subtitle textAlign="left" type="two" color="black">
diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
index 49f084d20..377eae9fd 100644
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -5,6 +5,12 @@
   overflow: hidden;
 }
 
+.imageContainer {
+  width: 100%;
+  height: 200px;
+  position: relative;
+}
+
 .default {
   background-color: var(--Base-Surface-Subtle-Normal);
 }