~ihabunek/vampires

5d4d09d033430022df834577ff0718435f284884 — Ivan Habunek 7 months ago ae3af2e
Better image handling

Keep constant aspect ratio instead of fixing the height.
1 files changed, 16 insertions(+), 6 deletions(-)

M index.html
M index.html => index.html +16 -6
@@ 14,7 14,17 @@
      .player { width: 640px }
      .w-full { width: 100% }
      #audio { margin-top: 1rem }
      #slide { height: 640px }

      #slide {
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        overflow: hidden;
        background-image: url("slides/slide_00.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    </style>
  </head>



@@ 34,11 44,11 @@
      upon corporate copyright. <span class="strike">Flash plugin</span>
      Javascript required.</p>

      <div class="centered">
        <img id="slide" src="slides/slide_00.jpg" />
      </div>
      <div id="slide"></div>

      <p><span id="current">1</span> / <span id="total"></span></p>
      <p class="centered">
        Slide <span id="current">1</span> / <span id="total"></span>
      </p>

      <audio id="audio" class="w-full" controls src="audio/full.mp3">
        Your browser does not support the &lt;audio&gt; element, sorry.


@@ 136,7 146,7 @@
    audio.addEventListener("timeupdate", event => {
      const index = getSlide(event.target.currentTime)
      const src = index < 10 ? `slides/slide_0${index}.jpg` : `slides/slide_${index}.jpg`
      slide.src = src
      slide.style.backgroundImage = "url(" + src + ")"
      current.innerText = index + 1
    });
  </script>