[HTML-모바일] 스마트폰 기기의 가로/세로 변경시 자동으로 이미지 크기 변경하기

으아.... css만으로 해결해보려고 구글링+카페 서치 2시간여 동안의 삽질을 거친 후.

그냥 스크립트 이용했습니다.

document.documentElement.clientHeight

위의 스크립트로 기기의 현재 화면크기를 가져올수 있습니다.

이를 이용해서 아래와 같이 resize 이벤트를 넣어서 자동 변경. 셀렉터는 제이쿼리로!

window.addEventListener("resize", function() {

let deviceHeight = (document.documentElement.clientHeight - (헤더+푸터 너비))) + "px";

$(".wrapper").find("img").height(deviceHeight);

}, false);

끝.

+추가로

전체화면 이벤트 : document.documentElement.requestFullscreen();