diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index 3a5a7f3f..d1404b18 100644
--- a/docs/getting-started/authoring.mdx
+++ b/docs/getting-started/authoring.mdx
@@ -60,6 +60,19 @@ title: Authoring
>
> For others, think about adding them to **prevent layout shift**.
+It is also possible to specify only one dimension (other is inferred from instrisic ratio), eg:
+
+```md
+
+```
+
+
+ Result
+
+
+
+
+
> [!NOTE]
> See [`MDX_BASEURL`](introduction#configuration:~:text=MDX_BASEURL) to understand how it is converted to a full URL.
diff --git a/src/components/mdx/Img/Img.tsx b/src/components/mdx/Img/Img.tsx
index a467f130..e3c6e418 100644
--- a/src/components/mdx/Img/Img.tsx
+++ b/src/components/mdx/Img/Img.tsx
@@ -4,16 +4,31 @@ import { ComponentProps } from 'react'
import sizeOf from 'image-size'
import { resolve } from 'path'
-export async function Img({ src, alt = '', className, ...props }: ComponentProps<'img'>) {
- const dims: Partial, 'width' | 'height'>> = {
- width: undefined,
- height: undefined,
+export async function Img({
+ src,
+ width,
+ height,
+ alt = '',
+ className,
+ ...props
+}: ComponentProps<'img'>) {
+ const dims = {
+ width,
+ height,
}
+
+ //
+ // If image is from MDX folder, we can determine its dimensions
+ //
+
if (process.env.MDX_BASEURL && src?.startsWith(process.env.MDX_BASEURL)) {
const path = resolve(src.replace(process.env.MDX_BASEURL, process.env.MDX!))
- const { width, height } = sizeOf(path)
- dims.width = width
- dims.height = height
+ const { width: w, height: h } = sizeOf(path)
+ const ratio = w && h ? w / h : undefined
+
+ // If only one dimension is provided, calculate the other based on the image's aspect ratio
+ dims.width ??= height && ratio ? Number(height) * ratio : w
+ dims.height ??= width && ratio ? Number(width) / ratio : h
}
return (