【Swift】.scaledToFit()とは？意味や使い方、活用シーンをわかりやすく解説！

2025.08.16 2025.08.16

SwiftUIで画像や図形などのサイズ調整を行う際に便利なのが .scaledToFit() です。

ビューの縦横比（アスペクト比）を保ったまま、親ビューの枠内に収まるよう自動的にリサイズしてくれます。

この記事では .scaledToFit() の基本的な意味や使い方、活用シーン、注意点までをわかりやすく丁寧に解説します。

.scaledToFit() とは？

.scaledToFit() は、SwiftUIのView型に定義されたメソッド（ViewModifier） で、ビューの縦横比を保持しながら、可能な限り小さく表示領域に収めるための修飾子です。

主に Image や Shape などの表示に使われ、親ビューに対して全体が収まるようスケーリングされるのが特徴です。

たとえば、画像を画面幅いっぱいに表示したいけれど、高さが足りずにはみ出してしまうのを防ぎたい場合に有効です。

具体例：画像を縦横比を保って表示する

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("sample_photo")
            .resizable()
            .scaledToFit()
            .frame(width: 300, height: 200)
            .border(Color.gray)
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Image("sample_photo")

.resizable()

.scaledToFit()

.frame(width: 300, height: 200)

.border(Color.gray)

}

このコードでは：

.resizable() で画像サイズを変更可能にする
.scaledToFit() で縦横比を保って縮小する
.frame(width:height:) で親ビューの表示領域を指定

結果、画像の縦横比を保ったまま、300×200の枠内に収まるサイズで表示されます。

.scaledToFit() の動作の仕組み

.scaledToFit() がどのようにビューをリサイズしているのかを理解しておくと、意図しない表示崩れを防げます。主な特徴は次のとおりです。

元のビューのアスペクト比は維持されます（画像が横長なら横長のまま）
枠いっぱいに引き伸ばされるのではなく、「収まるサイズまで縮小」される
親ビューのサイズに合わせて、過剰な拡大はされず、切り取り（クロップ）もされません

この仕組みによって、画像や図形が不自然に伸び縮みすることなく、自然な形で収められるのです

.scaledToFit() の活用シーン

どんな場面で .scaledToFit() を使うと便利なのか、具体例を見てみましょう。

ユーザーのプロフィール画像や商品画像など、一部が欠けると困る画像の表示
写真ギャラリーや画像一覧で、一定の枠に合わせて整列表示したいとき
PDFや図表などを「そのままの比率で縮小表示」したい場合
Shape（図形）をアニメーションで変化させつつ、レイアウトの枠からはみ出させたくないとき

このように、比率を崩さず安全に収めたいケースで .scaledToFit() は非常に重宝します。

デバイスの画面サイズや向きに左右されにくいのも強みです。

.scaledToFit() を使うときの注意点

便利な .scaledToFit() ですが、使い方を誤ると意図通りに動作しないことがあります。以下の点に注意しましょう。

.resizable() を付け忘れると画像は元サイズのままで、スケーリングが効きません
親ビューに .frame() を指定しないと、「どこに収めるのか」の基準が定まらず、意図通りに縮小されないことがあります
.scaledToFit() は画像全体が見えるよう縮小するため、「画面いっぱいに拡大して表示」したい場合には .scaledToFill() が適しています（ただし一部が切れる可能性あり）

この3点を押さえておけば、.scaledToFit() を使った画像や図形の表示がより意図通りにコントロールできます。

まとめ

今回は .scaledToFit() について詳しく紹介しました。

.scaledToFit() は、ビューを縦横比を保ったまま、親ビューに収まるようスケーリングする修飾子
主に画像や図形など、アスペクト比が重要なコンテンツに適している
.resizable() や .frame() と組み合わせて使うのが基本
クロップせずに安全に画像全体を表示したいときに活躍する
SwiftUIのレスポンシブなレイアウト構築に欠かせないツールのひとつ

画像や図形を美しく、かつ安全にレイアウトしたいときには、まず .scaledToFit() の活用を検討してみましょう。