상자 안에 맞추기

원본 종횡비를 유지하면서 지정된 경계 상자 내에 완전히 맞도록 이미지를 스케일링합니다. CSS object-fit: contain 동작과 동일합니다. 이미지는 너비와 높이가 모두 최대 제한 내에 유지되도록 필요한 만큼만 축소되며, 자르기나 왜곡이 없습니다. 세로, 가로 및 정사각형 이미지 모두 동일한 경계 내에 적절하게 맞습니다.

알고리즘은 이미지의 종횡비를 경계 상자의 종횡비와 비교하여 어느 치수가 제약인지 결정합니다. 이미지가 상자에 비해 상대적으로 더 넓으면 너비가 제한 요소가 되고 높이가 비례적으로 스케일링됩니다. 이미지가 상자에 비해 상대적으로 더 높으면 높이가 제약이 되고 너비가 따릅니다. 두 치수 모두에서 상자보다 이미 작은 이미지는 변경되지 않습니다(업스케일링을 활성화하지 않는 한).

업로드 크기 제한("이미지는 2000×2000을 초과할 수 없음")을 적용하는 플랫폼 관리자는 소스 치수 또는 방향에 관계없이 모든 업로드가 준수하도록 합니다. 할당된 공간 내에 맞는 미리보기를 생성하는 썸네일 생성 시스템은 혼합 방향 소스 이미지를 일관되게 처리합니다. 이메일 클라이언트 전반에 걸쳐 신뢰할 수 있는 렌더링을 위해 이미지를 최대 치수로 제한하는 이메일 템플릿 디자이너는 레이아웃을 깨는 과대 크기 이미지를 방지합니다. 전체 이미지 콘텐츠와 올바른 비율을 유지하면서 보장된 최대 치수가 필요한 모든 사람은 경계 상자 맞추기가 가장 신뢰할 수 있는 접근 방식임을 발견할 것입니다.