Skip to content

CSS:object-fit

object-fit 속성은 대체되는 요소의 내용(img, video, object, svg 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다.

Example 

img {
    width: 100px;
    height: 100px;
    object-fit: cover;   /* 아래에서 다룰 속성값 */
    border: 1px solid #000    /* 요소의 크기를 가늠하기위해 추가 */
}

해당하는 요소(img)에 직접 object-fit 속성을 넣으면 된다. (상위 요소가 아니라)

Properties

이 속성에서 사용할 수 있는 값은 아래와 같습니다.

fill
기본값. 주어진 너비와 높이에 딱 맞도록 사이즈를 조절합니다. 이미지의 가로세로 비율은 유지되지 않아요.
Object-fit-fill.jpeg
contain
가로세로 비율을 유지한 채로 사이즈가 조절되지만, 이미지와 컨테이너 간의 비율이 맞지 않는 경우엔 자리가 남게 됩니다.
Object-fit-contain.jpeg
cover
가로세로 비율을 유지한 채로 사이즈가 조절되며, 비율이 맞지 않더라도 이미지를 확대해 컨테이너를 완전히 채웁니다.
Object-fit-cover.jpeg
none
아무것도 하지 않고 본래의 이미지 사이즈를 유지합니다. 그래도 이미지 가운데가 보여지도록 하는 센스가 있어요.
Object-fit-none.jpeg
scale-down
none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절합니다.
Object-fit-scale-down.jpeg

See also

Favorite site