📌 목차

1. 📌 학습 배경
2. 📌 이미지 비율 조절
   • 1️⃣ scaledToFill과 클리핑
   • 2️⃣ 특정 비율 강제하기
   • 3️⃣ aspectRatio
   • 4️⃣ Modifier 순서 주의
3. 📌 frame 사용
   • minWidth(Height)와 maxWidth(Height)에 대한 오해

📌 학습 배경

프로젝트를 진행하던 중, 촬영한 사진을 특정 비율 및 크기에 맞게 화면에 보여주고자 했습니다.

그 과정에서 이미지가 찌그러지거나, 설정한 크기보다 커지는 문제가 발생하면서 관련 학습을 진행했습니다.

SwiftUI를 기준으로 학습했습니다.

📌 이미지 비율 조절

• .scaledToFit() — 비율 유지하면서 컨테이너 안에 완전히 들어가게 축소
• .scaledToFill() — 비율 유지하면서 컨테이너를 완전히 채우게 확대
• .aspectRatio(_:contentMode:) — 위 두 가지를 통합한 modifier

😛 참고 scaledToFit()은 aspectRatio(contentMode: .fit)와 같고, scaledToFill()은 aspectRatio(contentMode: .fill)와 같다.

1️⃣ scaledToFill과 클리핑

scaledToFill은 이미지가 컨테이너를 넘쳐서 레이아웃을 망가뜨릴 수 있습니다.

이는 원본 비율과 frame의 비율이 다를 때 발생합니다.