본문 바로가기
프로그래밍 언어/JS

HTML/CSS/JS) 영상 및 이미지 화면 크기에 맞게 (width: 100%)

by nomfang 2021. 4. 1.
728x90
반응형

영상이나 이미지를 조절하다보면 원본의 비율에 맞추어 자동으로 조정되는 현상이 있다

  1. div로 담을 영역을 생성 후 컨텐츠를 넣는다 (width: 100%;)
  2. 컨텐츠에 object-fit: cover; 속성, 값 추가 (

자바스크립트 이벤트 리스너로 화면에 크기에 맞춰주는 함수 사용

const changeHandler = () => {
  console.log(window.innerHeight);
  document.querySelector(".video > video").style.height=String(window.innerHeight)+"px";
};

window.addEventListener("resize", changeHandler);
반응형

댓글