Fix: ResponsiveWrapper can not handle cases with small dimensions

WordPress · Mar 16, 2020 · c8ce275 · c8ce275
1 parent 844b932
commit c8ce275
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/components/src/responsive-wrapper/index.js b/packages/components/src/responsive-wrapper/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
@@ -14,15 +15,23 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 } ) {
+	const [
+		containerResizeListener,
+		{ width: containerWidth },
+	] = useResizeAware();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
 	const imageStyle = {
-		paddingBottom: ( naturalHeight / naturalWidth ) * 100 + '%',
+		paddingBottom:
+			naturalWidth < containerWidth
+				? naturalHeight
+				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};
 	const TagName = isInline ? 'span' : 'div';
 	return (
 		<TagName className="components-responsive-wrapper">
+			{ containerResizeListener }
 			<TagName style={ imageStyle } />
 			{ cloneElement( children, {
 				className: classnames(

diff --git a/packages/components/src/responsive-wrapper/style.scss b/packages/components/src/responsive-wrapper/style.scss
@@ -15,4 +15,5 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
+	margin: auto;
 }