From cda6a2e1eb67fd57fdf2ab69e8a2eb596075c0bb Mon Sep 17 00:00:00 2001
From: Juan Sanchez Alcala
 <102036944+juanSanchezAlcala@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:45:18 +0200
Subject: [PATCH] fix: change way to solve CLS in teaser images

---
 components/x-teaser/src/Image.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/x-teaser/src/Image.jsx b/components/x-teaser/src/Image.jsx
index 58297c7d2..d594d6eaa 100644
--- a/components/x-teaser/src/Image.jsx
+++ b/components/x-teaser/src/Image.jsx
@@ -10,11 +10,9 @@ import Link from './Link'
  */
 const aspectRatio = ({ width, height }) => {
 	if (typeof width === 'number' && typeof height === 'number') {
-		const ratio = (100 / width) * height
-		return ratio.toFixed(4) + '%'
+		return { aspectRatio: `${width}/${height}` }
 	}
-
-	return null
+	return {}
 }
 
 const NormalImage = ({ src, alt }) => <img className="o-teaser__image" src={src} alt={alt} />
@@ -46,7 +44,7 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
 					'aria-hidden': 'true'
 				}}
 			>
-				<div className="o-teaser__image-placeholder" style={{ paddingBottom: aspectRatio(image) }}>
+				<div className="o-teaser__image-placeholder" style={{ ...aspectRatio(image) }}>
 					<ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} alt={alt} />
 				</div>
 			</Link>