가로 사진을 정사각형 썸네일로 바꾸니 왼쪽 관심 위치가 사라졌어요. 사진을 더 작게 줄이는 대신, 자르는 위치만 바꿔 두 곳을 남길 수 있을까요?
MDN은 비율을 유지하며 전체를 넣는 contain과 틀을 가득 채워 넘친 부분을 자르는 cover를 구별해요. 사진의 정렬 위치는 별도로 바꿀 수 있어요.
자체 종이 모형은 가로 400·세로 200, 틀은 200×200입니다. 왼쪽 위를 (0,0), 오른쪽·아래쪽을 양수로 정해요. 두 관심 위치는 점 A=(75,100), B=(250,100)입니다. 비율을 유지하고 회전하지 않으며 테두리도 포함해요. 두 점은 물건 전체를 뜻하지 않아요.
전체를 넣는 최대 배율은 작은 쪽인 200/400=1/2입니다. 그림이 200×100이어서 가운데 놓으면 위아래 50씩 비어요. 원래 좌표 (x,y)를 새 좌표 F(x,y)로 바꾸면 두 점이 모두 남아요.
여백 없이 채우는 최소 배율은 1입니다. 가운데 자르면 원본의 가로 100~300만 남겨 A는 틀 밖 −25, B는 틀 안 150에 놓여요.
이번에는 배율 1 그대로, 창의 왼쪽을 a라 둘게요. 가로 a~a+200에 두 점을 모두 넣는 조건은 다음과 같아요.
a=60을 택하면 A의 새 가로 좌표는 75−60=15, B는 250−60=190입니다. 세로는 모두 100이라 틀 안에 들어와요. 투명한 네모 창을 옮겨 확인해 볼까요? 사진 전체 보존과 두 관심점 보존은 다른 목표이며, 이번에는 축소 없이 위치만 고쳤어요.
착안: MDN, object-fit·object-position. 알려진 비율 유지·자르기·정렬 규칙에서 자체 좌표 사례를 구성했어요. 실제 브라우저 실행이나 화소 보간 결과, 물건 전체가 남는다는 보장은 아니에요.