.aspectRatio(aspectRatio?: number, contentMode?: "fit" | "fill")
The width-to-height ratio (e.g., 1.0 for square, 16/9 for widescreen). Omit to use the content’s intrinsic aspect ratio.
How the content fills the frame:
"fit" — scales to fit within the frame, preserving aspect ratio (may letterbox)"fill" — scales to fill the frame, preserving aspect ratio (may crop)
Support
Usage
Square aspect ratio
Image({ url: "photo.jpg" })
.resizable()
.aspectRatio(1)
Widescreen with fit
Image({ url: "banner.jpg" })
.resizable()
.aspectRatio(16 / 9, "fit")
Fill the frame
Image({ url: "cover.jpg" })
.resizable()
.aspectRatio(4 / 3, "fill")
.clipped()
Use intrinsic ratio
Image({ url: "photo.jpg" })
.resizable()
.aspectRatio()
See Also
