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