상자 채우기(커버)

빈 공간 없이 정확한 치수를 완전히 채우도록 이미지를 스케일링하고 자릅니다. CSS object-fit: cover 동작과 동일합니다. 빈 공간을 남길 수 있는 "contain" 맞추기와 달리, "cover"는 대상 영역의 모든 픽셀이 이미지 콘텐츠로 채워지도록 보장하며 경계를 넘어 확장되는 초과분을 자릅니다. 결과는 컨테이너를 완전히 채우는 완벽한 크기의 이미지입니다.

알고리즘은 더 작은 치수가 해당 대상 치수와 일치하도록 이미지를 스케일링한 다음 더 큰 치수에서 오버플로를 자릅니다. 정사각형 대상에 맞는 가로 이미지의 경우 이미지는 높이가 대상 높이와 일치할 때까지 스케일링된 다음 측면이 잘립니다. 자르기가 중앙에 위치하는 곳을 제어합니다: 기본 중앙 자르기는 이미지의 중간을 보존하지만 얼굴, 제품 또는 기타 중요한 영역이 잘리지 않도록 초점을 이동할 수 있습니다.

균일한 이미지 크기를 생성하는 전자상거래 개발자는 다양한 제품 사진에서 제품 그리드 썸네일을 생성합니다. 소스가 세로, 가로 또는 정사각형이든 그리드는 일관된 치수를 표시합니다. 배경 이미지로 전체 너비 섹션을 채우는 히어로 배너 디자이너는 지정된 높이에서 가장자리에서 가장자리까지 커버리지를 달성합니다. 게시물 및 광고에 대한 정확한 플랫폼 치수를 충족하는 소셜 미디어 관리자는 임의의 소스 이미지에서 올바른 크기의 콘텐츠를 생성합니다. 레터박싱이나 필러박싱 없이 정확한 이미지 치수가 필요한 레이아웃을 구축하는 모든 사람은 커버 자르기 맞추기가 필수적입니다.