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

목차

1. object-fit 예제 - 각 속성값별 효과 차이 확인
2. object-fit 정의
3. object-fit 구문
4. 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

• border-radius 속성 - 테두리 둥글게 지정.
• 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 - 부모요소의 속성값 상속.

 

object-fit 예제 - 각 이미지를 완전 둥글게 만들기

 

<style>

#box img {

    width: 200px; 

    height: 200px; 

    border-radius: 50%;

    object-fit: cover;

}
</style>

 

<div id="box">

    <img src="https://picsum.photos/200/300" alt="이미지 1">

    <img src="https://picsum.photos/200/300" alt="이미지 2">

    <img src="https://picsum.photos/200/300" alt="이미지 3">

</div>

 

결과보기