Skip to main content
.scaledToFit(): Component
This modifier takes no parameters.

Support

Usage

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()
    )

See Also