Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers control how a component sizes itself in response to its content and the space its parent offers. aspectRatio constrains the width-to-height ratio. scaledToFit and scaledToFill are shorthands for the two common content modes — fit inside the frame (letterbox) or fill the frame (crop). fixedSize opts a component out of the parent’s size proposal entirely, using the component’s ideal size instead. Useful for preventing text wrapping or letting a component report its intrinsic dimensions to its container.

​
aspectRatio

Sets the aspect ratio for a component’s content, controlling how it fits or fills the available space. 
.aspectRatio(aspectRatio?: number, contentMode?: "fit" | "fill")
​
aspectRatio
number
The width-to-height ratio (e.g., 1.0 for square, 16/9 for widescreen). Omit to use the content’s intrinsic aspect ratio.
​
contentMode
"fit" | "fill"
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)
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()

​
scaledToFit

Scales content to fit within the frame, preserving aspect ratio. May letterbox. 
.scaledToFit(): Component
This modifier takes no parameters. Fit an image within a frame The image scales down to fit entirely within the frame. Empty space may appear around the content (letterboxing). 
Image({ url: "photo.jpg" })
    .resizable()
    .scaledToFit()
    .frame({ width: 200, height: 200 })
Fit inside a colored container 
Color("gray")
    .frame({ width: 300, height: 200 })
    .overlay(
        Image({ url: "wide-banner.jpg" })
            .resizable()
            .scaledToFit()
    )

​
scaledToFill

Scales content to fill the frame, preserving aspect ratio. May crop. 
.scaledToFill(): Component
This modifier takes no parameters. Fill a frame with an image The image scales up to fill the entire frame. Parts of the image that extend beyond the frame are cropped when combined with .clipped(). 
Image({ url: "photo.jpg" })
    .resizable()
    .scaledToFill()
    .frame({ width: 200, height: 200 })
    .clipped()
Comparison with scaledToFit scaledToFill ensures no empty space within the frame but may crop content. Use scaledToFit when you need to see the entire content. 
HStack({ spacing: 16 }, [
    Image({ url: "wide.jpg" })
        .resizable()
        .scaledToFill()
        .frame({ width: 100, height: 100 })
        .clipped(),
    Image({ url: "wide.jpg" })
        .resizable()
        .scaledToFit()
        .frame({ width: 100, height: 100 }),
])

​
fixedSize

Prevents a component from resizing along specified axes, using its ideal size instead. 
.fixedSize(axes: { horizontal?: boolean; vertical?: boolean })
​
axes
{ horizontal?: boolean; vertical?: boolean }
required
fixedSize tells the layout system to use the component’s ideal (intrinsic) size along the specified axes, rather than the size proposed by the parent. This is useful when a parent container would otherwise compress or expand the component. For Text, this prevents line wrapping on the horizontal axis. Prevent text from wrapping 
Text("This text will not wrap to multiple lines")
    .fixedSize({ horizontal: true, vertical: false })
Fixed size on both axes 
Text("Fixed")
    .fixedSize({ horizontal: true, vertical: true })
Allow vertical expansion only 
Text("This text can grow taller but stays at proposed width")
    .fixedSize({ horizontal: false, vertical: true })

​
See also

  • frame — sets fixed or flexible size constraints
  • layoutPriority — controls space distribution among siblings
  • clipped — clips content that extends past the frame
  • Image — .resizable() is required for image scaling modifiers