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;
 
overflowScroll;
 
borderInset 4px #AEAEAE;
 
margin-top5px;
}

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>

Bausteine

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Sternebewertung

PHP - Leere Arrays entfernen

JavaScript - CountUp

MySQL - Datensatz Wert erhöhen