From abf7b7da8263090ae15d29f7af225983a162a4fe Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 31 May 2021 12:25:17 +0800
Subject: [PATCH] Fix aspect ratio of welcome image (#32302)

---
 .../src/components/welcome-guide/index.js     | 27 ++++++++++---------
 .../src/components/welcome-guide/style.scss   |  4 +++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index d897111e59878..13bfbfaade678 100644
--- a/packages/customize-widgets/src/components/welcome-guide/index.js
+++ b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -21,18 +21,21 @@ export default function WelcomeGuide( { sidebar } ) {
 
 	return (
 		<div className="customize-widgets-welcome-guide">
-			<picture className="customize-widgets-welcome-guide__image">
-				<source
-					srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
-					media="(prefers-reduced-motion: reduce)"
-				/>
-				<img
-					src="https://s.w.org/images/block-editor/welcome-editor.gif"
-					width="312"
-					height="240"
-					alt=""
-				/>
-			</picture>
+			<div className="customize-widgets-welcome-guide__image__wrapper">
+				<picture>
+					<source
+						srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
+						media="(prefers-reduced-motion: reduce)"
+					/>
+					<img
+						className="customize-widgets-welcome-guide__image"
+						src="https://s.w.org/images/block-editor/welcome-editor.gif"
+						width="312"
+						height="240"
+						alt=""
+					/>
+				</picture>
+			</div>
 			<h1 className="customize-widgets-welcome-guide__heading">
 				{ __( 'Welcome to block Widgets' ) }
 			</h1>
diff --git a/packages/customize-widgets/src/components/welcome-guide/style.scss b/packages/customize-widgets/src/components/welcome-guide/style.scss
index 3baacc37a2591..ffc704d183a2d 100644
--- a/packages/customize-widgets/src/components/welcome-guide/style.scss
+++ b/packages/customize-widgets/src/components/welcome-guide/style.scss
@@ -5,6 +5,10 @@
 		margin-bottom: $grid-unit-10;
 	}
 
+	&__image {
+		height: auto;
+	}
+
 	// Extra specificity to override `.wrap h1` styles.
 	.wrap &__heading {
 		font-size: 18px;