fill stretches the image to the box and can change its proportions.
로컬 CSS object-fit 생성기
실시간 미리보기로 CSS object-fit 비교
박스 크기와 fit 모드를 정하고 초점 위치를 조정한 뒤 이미지에 쓸 object-fit CSS를 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. 이미지는 업로드되지 않습니다.
CSS 준비 완료
object-fit: cover; object-position: 50% 50%;
QUICK GUIDE
fit이 자르는 방식을 결정합니다
contain shows the whole image and may leave empty space inside the box.
cover fills the box while cropping the image around object-position.
none and scale-down preserve more of the source size when the box allows it.
FAQ
Object fit questions
What does object-fit apply to?
It controls how a replaced element such as an img or video fits inside its box.
What is object-position?
It chooses the alignment point used when the object does not match the box shape.
Why is the sample an inline SVG?
A built-in sample keeps the preview private and makes crop changes obvious without uploading your image.