CODEWITHSUNDEEP
swiftui
sivafe9540
sivafe9540

Reputation: 99

Adjust Image Size of Image to Parent View Size

I just want to simply adjust the image size of image to the parent's view size.

Images in swiftUI are miss behaved children that simply will not adjust to their parent... I wanna be able to call ImageCard("image").frame(decide the size of the image)

 struct ImageCard: View {
        let backgoundImage: String?
        var body: some View {
          ZStack{
            Image(backgoundImage!)
                .resizable() // for resizing
                .scaledToFit() // for filling image on ImageView
                .cornerRadius(5)
                .shadow(color: .gray, radius: 6, x: 0, y: 3)
           }
        }
    }

Upvotes: 1

Views: 1726

Answers (3)

Asperi
Asperi

Reputation: 258541

If I understood correctly the intention was to fill proportionally, so

  ZStack{
    Image(backgoundImage!)
        .resizable() // for resizing
        .scaledToFill() // << here !! // for filling image on ImageView

but in that case it can spread out of bounds, so it needs to be clipped in place of .frame applied, so either

ImageCard("image")
   .frame(decide the size of the image)
   .clipped() // << here !!

or, better, as already described inject dimension inside card and apply it there, like

    Image(backgoundImage!)
        .resizable() // for resizing
        .scaledToFill()               // << here !!
        .frame(decide the size of the image)
        .clipped()                    // << here !!
        .cornerRadius(5)
        .shadow(color: .gray, radius: 6, x: 0, y: 3)
   }

Upvotes: 3

RelativeJoe
RelativeJoe

Reputation: 5114

I wrote a package just for jmages, You give it the max height & width without needing the Image's exact dimensions & it'll maximize the size without being stretched: https://github.com/NoeOnJupiter/SImages

Usage:

DownsampledImage(.wrapped(UIImage(named: backgroundImage)))
    .resizable(.wrapped(true))
    .frame(width: width, height: height)

Plus this will downsample your image to the size it's displayed in, your memory usage will be much lower since it depends on the resolution of the Image.

Note: If you wanna bound the image to the whole View, use UIScreen.main.bounds for the frame.

Upvotes: 2

Steven-Carrot
Steven-Carrot

Reputation: 3101

You can simply include two variables for width and height to make your ImageCard() become adjustable at any time since you mentioned that you wanted:

I wanna be able to call ImageCard("image").frame(decide the size of the image)

You don't need ZStack or scaleToFit() because you wanted to decide the size whenever the ImageCard() is called. Code is below the image.

enter image description here

struct DemoView: View {
  var body: some View {
    ImageCard(backgroundImage: "Swift", width: 300, height: 500)
  }
}
struct ImageCard: View {
  let backgroundImage: String?
  let width: CGFloat
  let height: CGFloat
  var body: some View {
    Image(backgroundImage ?? "")
        .resizable()
        .frame(width: width, height: height)
  }
}

Upvotes: 1

Related Questions