Use existing aspect ratio in the calculation

guardian · Oct 22, 2024 · 767c81b · 767c81b
1 parent 2ed431a
commit 767c81b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git 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
@@ -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>
+	);
+};