목차
objectFit 예제 - 이미지 크기 조정 방법 변경 objectFit 정의 objectFit 구문
<style> #hz {width: 150px; height: 200px; border:1px solid red;} </style> <img src="https://picsum.photos/200/150" alt="이미지" id="hz"> <br> <button onclick="homzzang()">클릭</button> <script> function homzzang() { document.getElementById("hz").style.objectFit = "cover"; } </script> 결과보기
<style>
#hz {width: 150px; height: 200px; border:1px solid red;}
</style>
<img src="https://picsum.photos/200/150" alt="이미지" id="hz">
<br>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.objectFit = "cover";
}
</script>
결과보기
<img>/<video> 요소의 크기 조정 방법 설정/반환. 1. 기본값: fill 반환값: 요소의 object-fit 속성값을 나타내는 문자열. CSS버전: CSS3 2. IE 제외한 주요 최신 브라우저 모두 지원.
<img>/<video> 요소의 크기 조정 방법 설정/반환.
1.
2.
IE 제외한 주요 최신 브라우저 모두 지원.
반환 (※ 인라인방식만 가능) object.style.objectFit 설정 object.style.objectFit = "fill|contain|cover|none|scale-down|initial|inherit" [속성값] CSS object-fit 속성 참고
반환 (※ 인라인방식만 가능)
object.style.objectFit
설정
object.style.objectFit = "fill|contain|cover|none|scale-down|initial|inherit"
[속성값]
CSS object-fit 속성 참고