Prefer to pick `width` style from `figure` element instead of img if possible.

[Mati365]

Suggested merge commit message (convention)

Fix (image): Prefer to pick width style from figure element instead of img if possible. Closes https://github.com/ckeditor/ckeditor5/issues/17441

---

Additional information

I'm not sure if the proposed solution is optimal. In this comment I proposed another solution with additional upcast, maybe it's better?

Consider this HTML:

<figure style="clear: both;margin: 0.9em auto;min-width: 50px;text-align: center;box-sizing: border-box;display: block;max-width: 100%;width: 5.15%;"class="image image_resized">
 <img height="233" width="258" src="https://www.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg" style="display: block;height: auto;margin: 0px auto;max-width: 100%;min-width: 100%;width: 100%;aspect-ratio: 258/233;" />
</figure>

Before

After

[Witoso]

To what data does it downcast? We have height and width on image to prevent layout shift.

[Mati365]

@Witoso It downcasts to:

<figure class="image image_resized" style="box-sizing:border-box;clear:both;display:block;height:auto;margin:0.9em auto;max-width:100%;min-width:50px;text-align:center;width:5.15%;">
<img style="aspect-ratio:258/233;display:block;margin:0px auto;max-width:100%;min-width:100%;width:55%;" src="https://www.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg" width="258" height="233">
</figure>

[CKEditorBot]

There has been no activity on this PR for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the contribution, leave a comment or reaction under this PR.

[CKEditorBot]

We've closed your PR due to inactivity. While time has passed, the core of your contribution might still be relevant. If you're able, consider reopening a similar PR.