Question 68402 in IOS Swift Question posted in
The official documentation can be found here.

How to properly fit a filled Image in its bounds on SwiftUI? – Ios swift

I have to fix a problem with Images on SwiftUI. I currently have to fill the images I receive in a certain vertical container, which are the cells of a LazyVGrid, but the problem is that the tappable area expands over the designated one.

I used the Accessibility Inspector, and I found out that the area in excess is due the Images. (screenshot attached)

The code I’m using is something similar to the following:

Image(uiImage: image.image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(
        maxWidth: width,
        maxHeight: height
    )
    .clipped()

I thought that by having the frames and the clipped method I could get rid of this problem, but that’s not the case unless I’m using some squared images. Any idea of what could work to fix this problem? Thanks!

enter image description here

Tags:

2

Answers


  1. 0

    Wrap content in Geometry Reader and you need to know the aspect ratio like I set 720/460 below

    GeometryReader { gr in
       Image(uiImage: image.image)
            .resizable()
             .aspectRatio(720/460, contentMode: .fit)
          }
        .clipped()
        .aspectRatio(720/460, contentMode: .fit)
    Login or Signup to reply.
  2. 0

    Just add .contentShape(Rectangle()) at the bottom:

                Image(uiImage: image.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(
                    maxWidth: width,
                    maxHeight: height
                )
                .clipped()
                .contentShape(Rectangle())    // <- Here!
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search