Add support for image sizing via titles in markdown

[Mpdreamz]

Introduced a feature to parse width and height from image titles using a regex pattern. Updated the markdown parser, tests, and docs to support and demonstrate inline image resizing with syntax like =WxH or =W. If height is omitted, it defaults to the width value.

See also the updated docs: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/398/syntax/images.html#inline-images

[reakaleek]

A common use case I often see is using 100% on mobile screen sizes and 50% or large screen sizes.

I know that this is currently not supported. But I'm thinking, what if we want this in the future? How would the syntax look like then?

[Mpdreamz]

img.png "title =50%,100%"

If we roll with the default breakpoints:

sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

The syntax would apply too: large (lg,2xl,2xl), small (md, sm)

wdyt?

[reakaleek]

img.png "title =50%,100%"

If we roll with the default breakpoints:

sm 40rem (640px) @media (width >= 40rem) { ... }
md 48rem (768px) @media (width >= 48rem) { ... }
lg 64rem (1024px) @media (width >= 64rem) { ... }
xl 80rem (1280px) @media (width >= 80rem) { ... }
2xl 96rem (1536px) @media (width >= 96rem) { ... }
The syntax would apply too: large (lg,2xl,2xl), small (md, sm)

wdyt?

Can you elaborate how the syntax would look like?

I don't understand how it would look like in the following exampe.

![alt](img.png "title =50%")

[Mpdreamz]

![50% large screens, 100% small screens](img.png "title =50%,100%")
![pixel sizes for large and small](img.png "title =250x500,125x250")
![50% width and height for all media](img.png "title =50%")

[reakaleek]

![50% large screens, 100% small screens](img.png "title =50%,100%")
![pixel sizes for large and small](img.png "title =250x500,125x250")
![50% width and height for all media](img.png "title =50%")

Cool, thank you for the clarification!