docs: update Image props (#48726)

Hey! Hope this can help anyone dealing with this in the future.

I'm also using the `TinaMarkdown` provider to generate my MDX and one of the things that I've found helpful so that the image was better handled in the browser was to set position to `undefined`, as it was the only way to unset it from `absolute`, which was affecting the visual aspect of the page.

Co-authored-by: Steven <229881+styfle@users.noreply.github.com>

docs/advanced-features/using-mdx.md

@@ -191,7 +191,7 @@ import Image from 'next/image'
 import { Heading, InlineCode, Pre, Table, Text } from 'my-components'
 
 const ResponsiveImage = (props) => (
-  <Image alt={props.alt} layout="responsive" {...props} />
+  <Image alt={props.alt} sizes="100vw" style={ width: '100%', height: 'auto' }  {...props} />
 )
 
 const components = {