CSS 이미지 리사이징 방식

| 웹사이트에서 이미지를 렌더하면 aspect ratio (이미지 가로 세로 길이가 이루는 비율) 가 1 이 아닌 이상 필히 가로에 맞추거나, 세로에 맞추거나 혹은 crop, fill 등 방법을 찾게된다.

MDN 의 css attribute: object-fit

fill : content-box 의 종횡비를 유지, content-box 를 가득 채운다. 종횡비가 다름 -> 일부 크롭. contain : 대체 컨텐츠 (Replaced Content) 종횡비를 유지, content-box 내부에 들어가도록 크기를 맞춤 조절함. 종횡비가 다름 -> letter box. cover : replaced content 의 종횡비를 유지, content-box fill. 종횡비 미일치 -> 일부 크롭. none : 그대로 넣기 scale-down : none or contain 중 replaced content 크기가 작은걸 선택.

sharp.js - image resizing lib

주어진 width, height or width x height 로 리사이징. 그렇지 않으면 fit. cover (default) : 종횡비 유지, 이미지를 크롭/클립핑 하면서까지 주어진 크기에 맞추려고 함. contain : 종횡비 유지, 필요하면 레터박스화. fill : 종횡비 무시, 주어진 크기에 맞게 스트레칭. inside : 종횡비 유지, 명시된 사이즈 <= 인 범위에서 최대 사이즈가 되도록 조정. outside : 종횡비 유지, 명시된 사이즈 >= 인 범위에서 최소 사이즈가 되도록 조절.