<body id="js-variable-box">
  <div class="section">
    <div class="contents-width">
      <p class="title">Viewportの長さ</p>
      <p id="js-variable-box_text" class="viewport-width"></p>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
    <div class="container">
      <picture>
        <source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
        <source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
        <img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
      </picture>
    </div>
  </div>
</body>
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}
.section {
  max-width: 1240px;
  height: 200vh;
  margin: 0 auto;
  padding: 20px 20px;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

picture {
  margin-bottom: 20px;
}

.container {
  margin-bottom: 1rem;
}

.contents-width {
  font-size: clamp(1em, 4vw, 3em);
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.5em;
}
//Viewportの長さを表示する処理
const eventFanc = () => {
  const VariableBoxWidth = document.getElementById("js-variable-box");
  const VariableBoxText = document.getElementById("js-variable-box_text");
  VariableBoxText.textContent = `${VariableBoxWidth.clientWidth}px`;
};

window.addEventListener("DOMContentLoaded", eventFanc);
window.addEventListener("resize", eventFanc);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js