목차
object-fit 예제 - 각 속성값별 효과 차이 확인
object-fit 정의
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
부모요소의 속성값 상속.
주소 복사
랜덤 이동