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” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Container horizontal drehen

PHP - Wörter mit der Stoppwortliste filtern

JavaScript - Frames per Link nachladen

MySQL - Datensätze sortieren nach Länge der Zeichen