NoJump

Non-jumping page with responsive images

HTML

<main>
    <!-- Image size: width×height  -->
    <!-- Padding-bottom : height / width * 100 -->

    <picture style="padding-bottom: 99.5%"> <!-- 1200×1194  -->
        <img src="https://i.imgur.com/qAo1V9a.jpg">
    </picture>

    <picture style="padding-bottom: 141.166666667%"> <!-- 600×847  -->
        <img src="https://i.imgur.com/OcdM7R3.png">
    </picture>

    <picture style="padding-bottom: 75.4404145078%"> <!-- 965×728  -->
        <img src="https://i.imgur.com/gxHHQxR.jpg">
    </picture>

    <picture style="padding-bottom: 61.4%"> <!-- 1000×614 -->
        <img src="https://i.imgur.com/GQuMbTp.jpg">
    </picture>

    <picture style="padding-bottom: 53.8461538462%"> <!-- 1300 × 700 -->
        <img src="https://i.imgur.com/AosBmWU.jpg">
    </picture>

    <picture style="padding-bottom: 180.39624609%"> <!-- 959 × 1730 -->
        <img src="https://i.imgur.com/jtGcPHo.jpg">
    </picture>

    <picture style="padding-bottom: 154.776299879%"> <!-- 827 × 1280 -->
        <img src="https://i.imgur.com/K4s9Ob8.jpg">
    </picture>

    <p id="anchor">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sollicitudin blandit. Morbi diam elit, pellentesque nec euismod in, aliquet eu lectus. Etiam vitae leo eu urna sollicitudin pretium placerat id ex. Vivamus at semper dui. Nunc commodo varius hendrerit. Nam molestie maximus dignissim. Vivamus faucibus ligula et enim mollis blandit. Aliquam eget justo vel libero dictum gravida. Fusce diam diam, vestibulum sed egestas vel, lacinia a nisi. Morbi sodales, urna vitae ultrices feugiat, leo diam gravida nunc, sit amet pulvinar elit nulla vel nisl. </p>

    <picture style="padding-bottom: 121.5%"> <!-- 800 × 972 -->
        <img src="https://i.imgur.com/UQed1nZ.png">
    </picture>

    <picture style="padding-bottom: 100%"> <!-- 900 × 900 -->
        <img src="https://i.imgur.com/AlwzxeZ.jpg">
    </picture>
</main>

CSS

* {
  margin: 0;
  padding: 0;
}

main {
  max-width: 600px;
  margin: 0 auto;
}

picture {
  width: 100%;
  display: block;
  position: relative;
  margin: 40px 0;
  background: #eee url("https://i.imgur.com/is1pYPE.gif") center no-repeat;
}

        img {
           display: block;
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
        }

JavaScript

location.hash = "#anchor";