Как изменить размер изображения (Image) в SwiftUI: масштабирование и кадрирование

Основные модификаторы для изменения размера Image в SwiftUI

В SwiftUI управление размером изображения строится на трёх ключевых модификаторах: .resizable(), .aspectRatio() / .scaledToFit() / .scaledToFill() и .frame(). Разберём каждый на примерах.

1. .resizable() — обязательный первый шаг

Без этого модификатора Image всегда рисуется в оригинальном размере. .resizable() позволяет изображению растягиваться или сжиматься под заданный контейнер:

Image("myPhoto")
    .resizable() // теперь изображение можно масштабировать
    .frame(width: 300, height: 200)

⚠️ Если просто добавить .frame(), изображение может исказиться, так как по умолчанию SwiftUI растягивает его без сохранения пропорций.

2. Сохранение пропорций: .aspectRatio(), .scaledToFit(), .scaledToFill()

Эти модификаторы решают проблему искажения:

• .scaledToFit() — вписывает изображение целиком в заданный прямоугольник, сохраняя пропорции. Свободное пространство заполняется фоном.
• .scaledToFill() — заполняет весь прямоугольник, обрезая лишнее по краям (как AspectFill в UIKit).
• .aspectRatio(contentMode: .fit) — то же, что .scaledToFit().
• .aspectRatio(contentMode: .fill) — то же, что .scaledToFill().

Примеры:

// Вариант 1: Уместить целиком (AspectFit)
Image("myPhoto")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 200)
    .background(Color.gray) // чтобы видеть свободное пространство

// Вариант 2: Заполнить контейнер с обрезкой (AspectFill)
Image("myPhoto")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .clipped() // обрезает выступающие части

Обратите внимание на .clipped() — без него изображение при .scaledToFill() может вылезать за границы .frame().

3. Точное управление соотношением сторон

Иногда нужно задать конкретное соотношение, например 16:9, независимо от размера контейнера:

Image("myPhoto")
    .resizable()
    .aspectRatio(16/9, contentMode: .fit)
    .frame(width: 300)

В этом случае высота будет рассчитана автоматически как 300 * 9 / 16 = 168.75.

4. Работа с GeometryReader для адаптивного размера

Если размер должен зависеть от экрана или родительского контейнера, используйте GeometryReader:

GeometryReader { geo in
    Image("myPhoto")
        .resizable()
        .scaledToFit()
        .frame(width: geo.size.width * 0.8) // 80% от ширины контейнера
}
.frame(height: 200)

5. Продвинутый пример: округлённое изображение с обрезкой

Image("avatar")
    .resizable()
    .scaledToFill()
    .frame(width: 100, height: 100)
    .clipShape(Circle()) // обрезает по кругу
    .shadow(radius: 5)

Итоговые рекомендации

• Всегда начинайте с .resizable().
• Для простых случаев используйте .scaledToFit() или .scaledToFill().
• Не забывайте про .clipped() при .scaledToFill().
• Если нужно точное соотношение сторон — .aspectRatio(_:contentMode:).
• Для динамических размеров — GeometryReader.

Теперь ваше изображение будет выглядеть аккуратно на любом экране!

Image("myPhoto")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200, alignment: .top) // прижать к верху
    .clipped()

Image(systemName: "star.fill")
    .font(.system(size: 40)) // размер иконки
    .foregroundColor(.yellow)

// Или через imageScale:
Image(systemName: "heart")
    .imageScale(.large) // .small, .medium, .large

AsyncImage(url: URL(string: "https://example.com/photo.jpg")) { phase in
    if let image = phase.image {
        image
            .resizable()
            .scaledToFit()
            .frame(width: 300)
    } else if phase.error != nil {
        Color.red
    } else {
        ProgressView()
    }
}