Object Fit

css에서 object-fit은 <img />나 <video />와 같은 css로 위치나 크기는 바꿀 수 있지만, 내부 컨텐츠에는 영향을 줄 수 없는 요소를 다룰 때 사용하며, 컨텐츠의 크기를 어떻게 맞출 것인지를 지정합니다.

object-fit: fill; /** <- default */
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

`fill`

콘텐츠의 가로, 세로 비율을 깨고, 컨텐츠를 늘려서 지정한 크기에 맞춥니다.

컨텐츠의 가로, 세로 비율을 고정하고, 컨텐츠를 지정한 크기에 맞춥니다. 가로, 세로 비율을 맞추기 때문에, 빈 공간이 생길 수 있습니다.

컨텐츠의 가로, 세로 비율을 고정하고, 컨텐츠를 지정한 크기에 맞춥니다. 단, 가로, 세로 비율이 맞지 않으면, 컨텐츠를 잘라냅니다.

컨텐츠의 크기를 조절하지 않고, 원본 사이즈로 처리됩니다. 크다면, 자르고, 작다면, 빈 공간이 생길 수 있습니다.

none과 contain중에 컨텐츠의 크기를 더 작게 만드는 것을 적용합니다.