auto resizing image based on window size - hogehoge666/syno_moments_slider GitHub Wiki

  <style>
    .portrait {
      width: auto;
      height: 100%;
    }

    .landscape {
      width: 100%;
      height: auto;
    }
  </style>

<img id='picture' src="./img03.jpg" class="landscape">

<img id='picture' src="./img03.jpg" class="portrait">

  <script>
    (function() {
      const image_class = function() {

        const image = document.getElementById('picture');

        if (image.width < image.height) {
          console.log('tatetnaga');
          image.className = 'portrait';
        } else {
          console.log('yokonaga');
          image.className = 'landscape';
        }
      }

      window.addEventListener('load', image_class, false);

    })();
  </script>