画像を表示させるImageビューはデフォルトだと元画像と同じサイズで表示されるが、resizableモディファイアを追加することで、利用可能なスペースに合わせて画像サイズを変更することができる。
コンテンツ
フレームサイズに合わせてリサイズ
それでは例を見ていこう。
まずは単純に縦横のサイズを指定したフレームに合わせて、画像をリサイズする例。
Image("face_icon")
.resizable()
.frame(width: 300.0, height: 120.0)

縦横比は歪んでしまうが、フレームに合わせて画像が伸縮していることが分かる。
縦横比を維持させる二つのモディファイア
scaledToFitモディファイア
縦横比を維持しながら、ビューサイズぴったりに合わせたい場合に使うモディファイア。
Image("face_icon")
.resizable()
.scaledToFit()
.frame(width: 300.0, height: 120.0)

scaledToFillモディファイア
縦横比を維持しながら、縦横のいずれかがビューサイズいっぱいになるよう調整される。
Image("face_icon")
.resizable()
.scaledToFill()
.frame(width: 300.0, height: 120.0)
