• Q&A
  • 회원가입
  • 로그인

[image] CSS - object-fit 속성 - 컨테이너에 맞게 <img>/<video> 크기 조정 방법 지정 (= object-fit속성 = 어브젝트핏속성)

목차

  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.

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

 

2.

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

 

3. 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

부모요소의 속성값 상속.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012