diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
index 507534d95264ce..6dfaa4fba7fa46 100644
--- a/packages/block-library/src/image/image-editor.js
+++ b/packages/block-library/src/image/image-editor.js
@@ -165,6 +165,7 @@ export default function ImageEditor( {
 	naturalHeight,
 	width,
 	height,
+	clientWidth,
 	children,
 } ) {
 	const { createErrorNotice } = useDispatch( 'core/notices' );
@@ -239,11 +240,11 @@ export default function ImageEditor( {
 						<div
 							className="richimage__crop-area"
 							style={ {
-								paddingBottom: `${
-									( 100 * naturalHeight ) / naturalWidth
-								}%`,
 								width,
-								height,
+								height:
+									height ||
+									( clientWidth * naturalHeight ) /
+										naturalWidth,
 							} }
 						>
 							<Cropper
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 45a725237f36de..bde36660bf6060 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -391,6 +391,7 @@ export default function Image( {
 				naturalHeight={ naturalHeight }
 				width={ width }
 				height={ height }
+				clientWidth={ clientWidth }
 			>
 				{ img }
 			</ImageEditor>