From 767c81b40c2e0542c739b2d6919e3338abf42a74 Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Tue, 22 Oct 2024 09:34:51 +0100
Subject: [PATCH] Use existing aspect ratio in the calculation

---
 dotcom-rendering/src/components/Card/Card.tsx |  6 +--
 .../src/components/MaintainAspectRatio.tsx    | 50 +++++++++++--------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index de3caba25b..3f827f4d4f 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -674,11 +674,7 @@ export const Card = ({
 														: imageSize
 												}
 												enableAds={false}
-												aspectRatio={
-													isFlexibleContainer
-														? '5/4'
-														: ''
-												}
+												aspectRatio={aspectRatio}
 											/>
 										</Island>
 									</div>
diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
index 4bbb8461d8..1e23401e3a 100644
--- a/dotcom-rendering/src/components/MaintainAspectRatio.tsx
+++ b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
+import { AspectRatio } from './CardPicture';
 
 type Props = {
 	height: number;
 	width: number;
-	aspectRatio?: string;
+	aspectRatio?: AspectRatio;
 	children: React.ReactNode;
 };
 
@@ -12,25 +13,30 @@ export const MaintainAspectRatio = ({
 	width,
 	aspectRatio,
 	children,
-}: Props) => (
+}: Props) => {
 	/* https://css-tricks.com/aspect-ratio-boxes/ */
-	<div
-		css={css`
-			/* position relative to contain the absolutely positioned iframe plus any Overlay image */
-			position: relative;
-			${aspectRatio
-				? `aspect-ratio: ${aspectRatio};`
-				: `padding-bottom: ${(height / width) * 100}% `}
-			& > iframe,
-			& > video {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
-		`}
-	>
-		{children}
-	</div>
-);
+	const paddingBottom =
+		aspectRatio === '5:4'
+			? `${(4 / 5) * 100}%`
+			: `${(height / width) * 100}%`;
+
+	return (
+		<div
+			css={css`
+				/* position relative to contain the absolutely positioned iframe plus any Overlay image */
+				position: relative;
+				padding-bottom: ${paddingBottom};
+				& > iframe,
+				& > video {
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			`}
+		>
+			{children}
+		</div>
+	);
+};