diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 7c86e3c66d0334..432250fdbb1f5c 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -1,3 +1,11 @@
+// @todo: these should be moved out to generic .is-left-aligned and .is-right-aligned classes
+@mixin editor-width( $width ) {
+	@media ( min-width: #{ ( $width ) } ) {
+		@content;
+	}
+}
+$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
 .editor-visual-editor__block[data-type="core/image"] {
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -8,17 +16,43 @@
 
 	&[data-align="left"] {
 		float: left;
+
+		// mobile, and no sidebars
 		margin-right: $block-padding;
-		@include break-medium() {
-			margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-left: $float-margin;
+			}
 		}
 	}
 
 	&[data-align="right"] {
 		float: right;
-		margin-left: $block-padding;
-		@include break-medium() {
-			margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-right: $float-margin;
+			}
 		}
 	}