JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<label>Bitte wähle ein Köln-Bild aus: <select id="bildWahl">
<option value=""></option>
<option value="a/a6/Stadtbild_K%C3%B6ln.jpg/800px-Stadtbild_K%C3%B6ln.jpg">Stadtbild Köln</option>
<option value="e/e2/Mediapark_%28K%C3%B6ln%29_jm26347.jpg/800px-Mediapark_%28K%C3%B6ln%29_jm26347.jpg">Mediapark</option>
<option value="a/a6/Panoramarestaurant_auf_Stadtbefestigungsrest_%28Bastei_%28K%C3%B6ln%29-1534777.jpeg/800px-Panoramarestaurant_auf_Stadtbefestigungsrest_%28Bastei_%28K%C3%B6ln%29-1534777.jpeg">Die Bastei</option>
</select> (Bildquelle: Wikimedia Commons)</label>
</header>
<figure id="bildAnzeige">
<img src="">
<figcaption></figcaption>
</figure>
CSS
html {
margin:0; padding: 0;
}
body {
padding:0; margin:0;
height: 100vh; max-height: 100vh;
}
header {
background-color: #ccF;
border-bottom: 2px solid black;
}
label {
line-height: 2em;
}
figure {
margin: 0 ; padding: 0;
width: 100vw;
}
figure img {
width: 100%;
}
figure figcaption {
width: 100%;
word-break: break-all;
}
JavaScript
document.addEventListener("DOMContentLoaded", init);
function init() {
let wähler = document.getElementById("bildWahl");
let bild = document.querySelector("#bildAnzeige img");
let untertitel = document.querySelector("#bildAnzeige figcaption");
let baseUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/";
wähler.addEventListener("change", function() {
let auswahl = wähler.value;
if (auswahl == "") {
bild.src="";
untertitel.textContent = "";
} else {
bild.src = baseUrl + auswahl;
untertitel.textContent = bild.src;
}
});
}