Merged in fix/teasercard-image-fill (pull request #1425)

feat:teasercard - image fill fix

* feat:teasercard - image fill fix


Approved-by: Erik Tiekstra

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">

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);
 }