CODEWITHSUNDEEP
iosswiftxcodeswiftuifrontend
Mohamed
Mohamed

Reputation: 59

SwiftUI edges become visible after scaling images to fill

I am new to swiftUI and I have been trying to place images in a Rounded rectangle but every time I use scaledToFill() The corners of the rectangle disappear. This is my code :

Image("img_6").resizable()
                
                .scaledToFill()
                .clipShape(RoundedRectangle(cornerRadius: 55,
            style: .continuous))
                .shadow(radius: 9)
                .frame(height: 550).clipped()

Upvotes: 1

Views: 909

Answers (1)

Asperi
Asperi

Reputation: 257719

Modifiers order is important. In your case just move .clipShape after .frame, as

tall:

demo1

wide:

demo2

    Color.clear
        .frame(height: 550)
        .overlay(Image("img")
            .resizable()
            .scaledToFill())
        .clipShape(RoundedRectangle(cornerRadius: 55,
            style: .continuous))
        .shadow(radius: 9)

Note: .clipped not needed, because .clipShape already performs clipping

Upvotes: 3

Related Questions