【SwiftUI】Imageを縦横比を維持して表示する

今回はImageの縦横比を維持してリサイズする方法についてです。

※この記事の情報は次のバージョンで動作確認しています。

MacOS Monterey (12.1) Xcode (v13.3.1)

aspectRatio(contentMode: .fit)を使おう

• .aspectRatio(contentMode: .fit) は縦横比を維持するViewが持つモディファイア
• 縦か横のどちらかのサイズを決めるともう片方は自動で決まる

横幅を固定させて縦は自動

Image("image_00")
 .resizable()
 .aspectRatio(contentMode: .fit)
 .frame(width:200)

• 縦か横のサイズのどちらかを確定させておく
• frameは必ず最後に追加する

親の高さと画像の高さを同じにする

HStack {
    Image("image_00")
        .resizable()
        .aspectRatio(contentMode: .fit)
    
    Image("image_00")
        .resizable()
        .aspectRatio(contentMode: .fit)
}
.frame(height: 100)

• 親ビューにframeをつけてサイズを固定する
• Imageは自動で親の縦幅とイコールになる
• 縦幅が確定するので横幅はアスペクト比を維持して自動で決まる