【SwiftUI】縦横比を維持しながら画像をリサイズする | プログラマーになった「中卒」男のブログ

画像を表示させるImageビューはデフォルトだと元画像と同じサイズで表示されるが、resizableモディファイアを追加することで、利用可能なスペースに合わせて画像サイズを変更することができる。

コンテンツ

フレームサイズに合わせてリサイズ

それでは例を見ていこう。

まずは単純に縦横のサイズを指定したフレームに合わせて、画像をリサイズする例。

Image("face_icon")
    .resizable()
    .frame(width: 300.0, height: 120.0)

縦横比は歪んでしまうが、フレームに合わせて画像が伸縮していることが分かる。

縦横比を維持しながら、ビューサイズぴったりに合わせたい場合に使うモディファイア。

Image("face_icon")
    .resizable()
    .scaledToFit()
    .frame(width: 300.0, height: 120.0)

縦横比を維持しながら、縦横のいずれかがビューサイズいっぱいになるよう調整される。

Image("face_icon")
    .resizable()
    .scaledToFill()
    .frame(width: 300.0, height: 120.0)