diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index 3cf3ff04e6c93..1dae48c7095ae 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	createBlock,
@@ -217,15 +218,59 @@ export const settings = {
 			/>
 		);
 
-		return (
-			<figure className={ classes }>
+		const figure = (
+			<Fragment>
 				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+			</Fragment>
+		);
+
+		if ( 'left' === align || 'right' === align ) {
+			return (
+				<div>
+					<figure className={ classes }>
+						{ figure }
+					</figure>
+				</div>
+			);
+		}
+
+		return (
+			<figure className={ classes }>
+				{ figure }
 			</figure>
 		);
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			save( { attributes } ) {
+				const { url, alt, caption, align, href, width, height, id } = attributes;
+
+				const classes = classnames( {
+					[ `align${ align }` ]: align,
+					'is-resized': width || height,
+				} );
+
+				const image = (
+					<img
+						src={ url }
+						alt={ alt }
+						className={ id ? `wp-image-${ id }` : null }
+						width={ width }
+						height={ height }
+					/>
+				);
+
+				return (
+					<figure className={ classes }>
+						{ href ? <a href={ href }>{ image }</a> : image }
+						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					</figure>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {
diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index 9797196434499..17e65f0629fda 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -1,6 +1,4 @@
 .wp-block-image {
-	width: fit-content;
-
 	&.aligncenter {
 		display: block;
 		margin-left: auto;
@@ -8,20 +6,26 @@
 		text-align: center;
 	}
 
-	&.is-resized {
-		width: min-content;
-
-		// Emulate min-content for Edge and IE11
-		display: -ms-inline-grid;
-		-ms-grid-columns: min-content;
+	// Floats get an extra wrapping aside element, so the figure becomes a child.
+	.alignleft,
+	.alignright {
+		display: table;
+		margin: 0;
 
 		figcaption {
-			-ms-grid-row: 2;
+			display: table-caption;
+			caption-side: bottom;
 		}
+	}
 
-		img {
-			max-width: none;
-		}
+	.alignleft {
+		float: left;
+		margin-right: 1em;
+	}
+
+	.alignright {
+		float: right;
+		margin-left: 1em;
 	}
 
 	// Supply caption styles to images, even if the theme hasn't opted in.