1 files changed, 16 insertions(+), 6 deletions(-)

M index.html

@@ 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>