From c00a86c6ddb214d7ab72894023cc9e4d0e9f6904 Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 16 Mar 2022 10:05:12 -0400 Subject: [PATCH] Update `next/image` docs for width & height --- docs/api-reference/next/image.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 4035fa8c65ec..46a14e31d0d6 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -48,15 +48,27 @@ When using an external URL, you must add it to ### width -The width of the image, in pixels. Must be an integer without a unit. +The width of the image. Must be an integer without a unit. -Required, except for statically imported images, or those with [`layout="fill"`](#layout). +The meaning of the `width` property can change depending on the [`layout`](#layout) and [`sizes`](#sizes) properties since some layouts will stretch to fill the parent container and others will not. + +The `width` property represents the _rendered_ width in pixels when `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"` without `sizes` so it will affect how large the image appears. + +The `width` property represents the _original_ width in pixels when `layout="responsive"`, `layout="fill"`, or `layout="raw"` with `sizes` so it will only affect the aspect ratio. + +Required, except for [statically imported images](#local-images), or those with `layout="fill"`. ### height -The height of the image, in pixels. Must be an integer without a unit. +The height of the image. Must be an integer without a unit. + +The meaning of the `height` property can change depending on the [`layout`](#layout) and [`sizes`](#sizes) properties since some layouts will stretch to fill the parent container and others will not. + +The `height` property represents the _rendered_ height in pixels when `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"` without `sizes` so it will affect how large the image appears. + +The `height` property represents the _original_ height in pixels when `layout="responsive"`, `layout="fill"`, or `layout="raw"` with `sizes` so it will only affect the aspect ratio. -Required, except for statically imported images, or those with [`layout="fill"`](#layout). +Required, except for [statically imported images](#local-images), or those with `layout="fill"`. ## Optional Props