THEMES-1322 - fix: lead art gallery aspect ratio (#1716)

fix: lead art gallery aspect ratio Co-authored-by: Alfonso Andrés López Molina <[email protected]>
WPMedia · Aug 9, 2023 · b933214 · b933214
1 parent f86ef43
commit b933214
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -1743,21 +1743,20 @@
 							width: var(--global-spacing-4),
 						),
 						image: (
-							width: 100%,
+							max-height: 100%,
+							object-fit: contain,
 						),
 					),
 				),
 				lead-art-carousel-image-wrapper: (
 					align-items: center,
+					aspect-ratio: calc(16 / 9),
+					background-color: var(--global-black),
 					display: flex,
 					justify-content: center,
-					max-height: 75vh,
-					background-color: var(--global-black),
+					max-height: unset,
+					overflow: auto,
 					components: (
-						image: (
-							width: auto,
-							max-height: 75vh,
-						),
 						button: (
 							position: fixed,
 							top: var(--global-spacing-6),
@@ -3023,6 +3022,7 @@
 					left: var(--global-spacing-4),
 				),
 				lead-art-carousel-image-wrapper: (
+					max-height: 75vh,
 					components: (
 						button-medium: (
 							left: var(--global-spacing-4),

diff --git a/blocks/lead-art-block/features/leadart/default.jsx b/blocks/lead-art-block/features/leadart/default.jsx
@@ -233,7 +233,6 @@ export const LeadArtPresentation = (props) => {
 									<Image
 										ansImage={galleryItem}
 										// 16:9 aspect ratio
-										width={800}
 										height={450}
 										responsiveImages={[800, 1600]}
 										alt={galleryItem.alt_text}

diff --git a/blocks/lead-art-block/themes/news.json b/blocks/lead-art-block/themes/news.json
@@ -59,7 +59,8 @@
 						"width": "var(--global-spacing-4)"
 					},
 					"image": {
-						"width": "100%"
+						"max-height": "100%",
+						"object-fit": "contain"
 					}
 				}
 			},
@@ -78,15 +79,13 @@
 		"styles": {
 			"default": {
 				"align-items": "center",
+				"aspect-ratio": "calc(16/9)",
+				"background-color": "var(--global-black)",
 				"display": "flex",
 				"justify-content": "center",
-				"max-height": "75vh",
-				"background-color": "var(--global-black)",
+				"max-height": "unset",
+				"overflow": "auto",
 				"components": {
-					"image": {
-						"width": "auto",
-						"max-height": "75vh"
-					},
 					"button": {
 						"position": "fixed",
 						"top": "var(--global-spacing-6)",
@@ -105,6 +104,7 @@
 				}
 			},
 			"desktop": {
+				"max-height": "75vh",
 				"components": {
 					"button-medium": {
 						"left": "var(--global-spacing-4)"