목차
object-fit 예제 - 각 속성값별 효과 차이 확인 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
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;
}
<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>
결과보기
