【javascript】横長の画面なら、画像のwidthを50%、縦長なら100%になるようjavascriptで制御。画像のレスポンシブ対応。

ケータイデバイスなど、縦長の画面で縦長の画像を表示するなら問題ないのですが。。。

PCなど横長の画面で、縦長の画像を表示しようとすると、画像が全部表示できません。

PCのような横長の画面なら、画像のwidthを50%にし、 ケータイデバイスのように縦長になったら、widthを100%になるようjavascriptで制御したいと思います。

画面のwidthとheightの取得方法は以下を参照してください。

コードの紹介

 const img = document.querySelectorAll("img");   //画像をすべて取得

 if(window.innerWidth > 680 ){      //画面が680px以上だったら
      for (let i = 0; i < img.length; i++) {
          const element = img[i];
          if(element.clientHeight > element.clientWidth){    //画像の高さが幅より大きい場合
             element.style.width = '50%';                   //widthを50%に
          }
      }
  } 

これで横長デバイスで縦長画像を表示することができると思います。

ロリポップ！レンタルサーバー SAMURAI ENGINEER(侍エンジニア)｜無料カウンセリング予約