SwiftUI：如何让Image完全填满固定尺寸的VStack容器？

问题原因 #

你当前的代码把frame(width:300, height:200)加在了Image上，虽然用了.aspectRatio(contentMode: .fill)，但Image超出frame的部分没有被裁剪，且VStack未被明确约束尺寸，导致红色背景和Image显示区域不匹配，出现黑边。

修复后的代码 #

VStack {
    Image(.document1)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
}
.frame(width: 300, height: 200)
.background(.red)

关键调整说明 #

• 将固定宽高约束从Image转移到VStack，确保容器本身尺寸为300x200
• 给Image设置maxWidth: .infinity, maxHeight: .infinity，让它完全铺满VStack容器
• 添加.clipped()修饰符，裁剪掉Image超出容器的部分（.fill模式会让图片保持比例填充，超出部分默认不裁剪，这是出现黑边的核心原因）

内容的提问来源于stack exchange，提问作者deloki