JavaScript - Bilder Zoom-Funktion

Bild zoomen, über die Scrollleisten kann dann zum gewünschten Bildausschnitt gescrollt werden.

Zoom:

Vergrößere den Zoomfaktor bis die "Mariannenbrücke" in München erscheint.


<style>

div#border {
 
width450px;
 
height350px;
 
overflowAuto;
 
overscroll-behaviorContain;
 
margin-top5px;
 
scrollbar-widththin;
 
scrollbar-color#AAA;
}

div#border::-webkit-scrollbar {
  
width5px;
  
height5px;
}

div#border::-webkit-scrollbar-thumb {
  
background#AAA;
}

div#border img#img {
 
max-width100%;
 
heightAuto;
 
object-fitCover;
}

input#zoomer {
 
width390px;
 
vertical-alignMiddle;
}
</
style>

<
script>
function 
zoom(z) {
 
document.getElementById("img").style.transform=" scale("+z+", "+z+")";
 
document.getElementById("img").style.width=(z*100)+"%";
}
</
script>

<
div>Zoom
<
input type="range" id="zoomer" value="1" min="1" max="10" step="0.1"
 
oninput="zoom(this.value)"></div>

<
div id="border"><img src="bild.jpg" id="img"></div>

Beispiel 2

Quelltext: Siehe Kommentar (#11)

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<picture>

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Letzte Aktualisierung

JavaScript - Diese Webseite teilen

MySQL - Das Datum der letzten Woche anzeigen

Lernen beim Arbeiten
Viele Fehler werden beim Arbeiten an der Homepage erkannt und im weiteren Verlauf vermieden (Etwas daraus gelernt!). Auch das Lernen durch Ausprobieren, zum Beispiel einen bestimmten Wert einfach erhöhen und sehen was dann passiert ist sehr lehrreich.