diff --git a/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts b/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts
index f0adf13dc56..84975d7d55e 100644
--- a/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts
+++ b/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts
@@ -186,6 +186,21 @@ export default class ImageResizeEditing extends Plugin {
return null;
}
+ // If this is an image inside a figure with width style, skip setting the width.
+ // See: https://github.com/ckeditor/ckeditor5/issues/17441
+ if ( viewElement.name !== 'figure' ) {
+ let parent = viewElement.parent;
+
+ // Traverse up through parents until we find a figure or run out of ancestors
+ while ( parent ) {
+ if ( parent.is( 'element' ) && imageUtils.isBlockImageView( parent ) && parent.getStyle( 'width' ) ) {
+ return null;
+ }
+
+ parent = parent.parent;
+ }
+ }
+
return viewElement.getStyle( 'width' );
}
}
diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js b/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js
index c8c0b67d41b..cbee886ccba 100644
--- a/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js
+++ b/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js
@@ -105,6 +105,16 @@ describe( 'ImageResizeEditing', () => {
expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'resizedWidth' ) ).to.equal( '100px' );
} );
+ it( 'it should prefer the width from the figure element over the width from the image element', () => {
+ editor.setData(
+ '' +
+ `
` +
+ ''
+ );
+
+ expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'resizedWidth' ) ).to.equal( '100px' );
+ } );
+
it( 'upcasts 50% width correctly', () => {
editor.setData( `
` );