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 {

 width: 450px;

 height: 350px;

 overflow: Auto;

 overscroll-behavior: Contain;

 margin-top: 5px;

 scrollbar-width: thin;

 scrollbar-color: #AAA;

}



div#border::-webkit-scrollbar {

  width: 5px;

  height: 5px;

}



div#border::-webkit-scrollbar-thumb {

  background: #AAA;

}



div#border img#img {

 max-width: 100%;

 height: Auto;

 object-fit: Cover;

}



input#zoomer {

 width: 390px;

 vertical-align: Middle;

}

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

Zoom:

Quelltext: Siehe Kommentar (#11)

Bausteine Alle Anzeigen

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

<dd> Definitionsliste

CSS - Transparenter Farbverlauf

PHP - Bild und Bildinformation anzeigen

JavaScript - Hexadezimal nach RGB umwandeln

MySQL - Das Datum und die Uhrzeit der letzten Stunde anzeigen