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

​
Support

​
Usage

​
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 }),
])

​
See Also