title: Fill Image with its content in SwiftUI
body: <p>I am creating a Widget in SwiftUI and I'm finding what I believe is a very silly issue.</p>
  <p>I have an <code>Image</code> that I want to use as a background. I have set its aspect ratio as <code>.fill</code> but it doesn't seem to do it.</p>
  <p>Here's the code:</p>
  <pre><code>var body: some View {
          ZStack {
              Image(affirmation.customImageName ?? &quot;c_0&quot;)
                  .edgesIgnoringSafeArea(.all)
                  .aspectRatio(contentMode: .fill)
                  .frame(width: 300, height: 300, alignment: .center)
                  .background(Color.green)
              
              HStack {
                  VStack {
                      Text(affirmation.title)
                          .font(.title)
                          .multilineTextAlignment(.leading)
                  }
                  Spacer()
              }
              .padding(.leading, 5)
              .padding(.top, 5)
              
          }
      }
  </code></pre>
  <p>And how it looks:
  <a href="https://i.stack.imgur.com/i9qbQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i9qbQ.png" alt="enter image description here" /></a></p>
  <p>Also, if I delete <code>.frame(width: 300, height: 300, alignment: .center)</code>, the image won't use the whole area.</p>
  <p><strong>UPDATED</strong>:</p>
  <p>Now the image resizes thanks to @staticVoidMan answer, adding <code>resizable()</code> did the trick. The issue now is that the <code>Text</code> seems to also resize and fill more than its space.</p>
  <pre><code>var body: some View {
          ZStack {
             Image(affirmation.customImageName ?? &quot;c_0&quot;)
             .resizable()
             .aspectRatio(contentMode: .fill)
              
              HStack {
                  Text(affirmation.title)
                      .font(.body)
                      .multilineTextAlignment(.leading)
                      .lineLimit(nil)
                  Spacer()
              }
              .padding(.leading, 5)
              .padding(.top, 5)
              
          }
  </code></pre>
  <p>Here's the image:</p>
  <p><a href="https://i.stack.imgur.com/E80J1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E80J1.png" alt="enter image description here" /></a></p>
  <p>Thanks in advance</p>