[image] CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= object-fit속성 = 어브젝트핏속성) ※ img/video 사이즈 조정

목차

1. object-fit 예제 - 각 속성값별 효과 차이 확인
2. object-fit 정의
3. object-fit 구문

object-fit 예제 - 각 속성값별 효과 차이 확인

 

<style>

img.a {width: 100px; height: 200px; object-fit: fill; border:1px solid red;}

img.b {width: 100px; height: 200px; object-fit: contain; border:1px solid red;}

img.c {width: 100px; height: 200px; object-fit: cover; border:1px solid red;}

img.d {width: 100px; height: 200px; object-fit: none; border:1px solid red;}

img.e {width: 100px; height: 200px; object-fit: scale-down; border:1px solid red;}

</style>

<table>

    <tr>

        <th>원본</th>

        <th>fill</th>

        <th>contain</th>

        <th>cover</th>

        <th>none</th>

        <th>scale-down</th>

    </tr>

    <tr>

        <td><img src="https://picsum.photos/200/150" alt="원본"></td>

        <td><img class="a" src="https://picsum.photos/200/150" alt="fill"></td>

        <td><img class="b" src="https://picsum.photos/200/150" alt="contain"></td>

        <td><img class="c" src="https://picsum.photos/200/150" alt="cover"></td>

        <td><img class="d" src="https://picsum.photos/200/150" alt="none"></td>

        <td><img class="e" src="https://picsum.photos/200/150" alt="scale-down"></td>

    </tr>

</table>

 

결과보기

object-fit 정의

 

컨테이너에 맞게 '<img>/<video>' 크기 조정 방법 지정.

 

---

 

1. cf

object-position 속성 - 콘테이너 내 '<img>/<video>' 위치 조정.

 

2.

• 기본값: fill
• 상속여부: X
• 애니효과: X
• CSS버전: CSS3
• JS구문: object.style.objectFit="cover"

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN object-fit 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

object-fit 구문

 

selector {object-fit: fill|contain|cover|none|scale-down|initial|inherit;}

 

---

[속성값]

 

fill

전체 화면을 늘리거나 눌러 상자를 채움.

 

contain

원본 이미지의 가로/세로 비율 유지한 채 줄어듦.

 

cover

상자를 다 채울만큼 가로/세로 비율 유지한 채 키운 후, 양쪽을 자름.

 

none

원래 크기 유지한 채, 양쪽을 자름.

 

scale-down

none과 contain 중 크기가 더 작은 값 자동 선택.

 

initial

이 속성의 기본값 선택.

 

inherit

부모요소의 속성값 상속.