CODEWITHSUNDEEP
iosswiftiphoneswiftui
David Velarde
David Velarde

Reputation: 162

SwiftUI Image component shrinks when resized

I've been testing out SwiftUI and I guess most of you have too. I am having a weird issue, most probably a bug, but maybe someone else have found a workaround for it.

var body: some View {
    Image("profilepic")
        .resizable()
        .aspectRatio(contentMode: .fit)
}

In a normal situation I'd expect that image to be resized and have big margins in the screen because I set the content mode to fit, if I'd use fill it will just fill the whole screen.

The fit is working fine, but the image is not keeping the aspect ratio, it shrinks.

If you have encounter this issue and know how to fix it let me know.

Upvotes: 4

Views: 5337

Answers (4)

Ozgur Sahin
Ozgur Sahin

Reputation: 1453

This solved the shrink problem

Image(uiImage:self.selectedImage)
.resizable()
.aspectRatio(self.selectedImage.size, contentMode: .fit)

Upvotes: 1

Michael
Michael

Reputation: 161

Was having the same problem trying to shrink an image down to a thumbnail for a list view... nothing was working. I also got errors trying the suggested fix from Lex above. So I modified it... Extended View Protocol with a function to calculate and return the image aspect ratio...

extension View {
    func calcImageAspectRatio(_ imageName: String) -> Length?
    {
        if let image = UIImage(named: imageName) {
            let size = image.size
            return size.width / size.height
        }
        return nil
    }
}

extension ExerciseList {
    struct ExerciseCell : View {
        let exercise: Exercise

        var body: some View {
            HStack {
                Image(exercise.visuals)
                    .resizable()
                    .aspectRatio(calcImageAspectRatio(exercise.visuals), contentMode: .fit)
                    .frame(width: 100, height: 100, alignment: .center)
                Text(exercise.title)
            }
        }
    }
}

Upvotes: 3

Lex
Lex

Reputation: 310

public var body: some View {

    let size = UIImage(named: "at")!.size
    let aspect = size.width / size.height

    let img = Image("at")
        .resizable()
        .aspectRatio(aspect, contentMode: .fill)
        .frame(width: 200, height: 200, alignment: .center)
        .clipShape(Circle())
        .shadow(radius: 10)
    return img
}

enter image description here enter image description here

Upvotes: 0

DenFav
DenFav

Reputation: 2811

I also having this issue, looks like this is beta bug. I recommend to leave it as it is and wait for a fix from Apple.

If you really need to have correct Image you can create custom view struct for a SwiftUI

struct FixedImage: UIViewRepresentable {

    var imageName: String

    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView(image: UIImage(named: imageName))
        imageView.contentMode = .scaleAspectFit
        return imageView
    }

    func updateUIView(_ uiView: UIImageView, context: Context) {
        uiView.image = UIImage(named: imageName)
    }
}

Upvotes: 6

Related Questions