[BoxFit] 이미지 크기 조절 fit 옵션

BoxFit은 Flutter에서 이미지를 박스(컨테이너) 안에 배치할 때
이미지의 크기와 위치를 어떻게 조절할지 결정하는 데 사용

 

Container(
  width: double.infinity,
  height: 300,
  color: Colors.amber,
  child: Image(
    image: const AssetImage('asset/image/onb.jpg'),    
    fit: BoxFit.contain,
  ),
)

원본 이미지

BoxFit.fill

• 이미지를 박스의 크기에 맞게 강제로 늘리거나 축소
• 이미지 비율이 유지되지 않음

 

BoxFit.contain

• 이미지의 비율을 유지하면서 박스 안에 완전히 맞춤
• 박스와 이미지의 비율이 다르면 여백이 생김

 

BoxFit.cover

• 이미지를 박스의 크기에 맞추되 박스를 완전히 채우도록 비율을 유지
• 이미지가 잘릴 수 있음
• 화면 전체를 채우는 배경 이미지에 많이 사용

 

BoxFit.fitWidth

• 이미지의 너비를 박스에 맞추되 비율을 유지하여 높이를 조정
• 높이는 박스의 높이에 맞춰지지 않으며, 이미지가 잘릴 수 있음

 

BoxFit.fitHeight

• 이미지의 높이를 박스에 맞추되, 비율을 유지하여 너비를 조정
• 너비는 박스의 너비에 맞춰지지 않으며, 이미지가 잘릴 수 있음

 

BoxFit.none

• 이미지의 원래 크기를 유지하면서 박스 안에 배치
• 박스가 이미지보다 작으면 이미지의 일부가 잘림

 

BoxFit.scaleDown

• 이미지의 크기가 박스보다 클 경우 contain처럼 작아짐
• 이미지가 박스보다 작을 때는 아무런 변화가 없음