media쿼리 portrait landscape 구분

1. css로는

@media screen and (orientation:portrait){

  //새로로 들었을때 스타일 적용

}

@media screen and (orientation:landscape){

  //가로로 들었을때 스타일 적용

}

2. jQuery

if($(window).innerHeight() < $(window).innerWidth()){

  $('.img').css({

    //가로로 들었을때의 스타일 적용

  })

} else {

  $('.img').css({

    //새로로들었을때 스타일 적용

  })

}

3. Vanilla JavaScript

if(window.innerHeight < window.innerWidth){

  document.querySelector('.img').style.스타일종류 = 가로스타일  

} else {

  document.querySelector('.img').style.스타일종류 = 새로스타일

}

[출처] 모바일 이미지를 가로세로 돌렸을때 (하드코딩하는사람들) |작성자 고씨