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.

<blockquote> Block-Zitat

CSS - Hintergrundbild mit Zoom Funktion

PHP - Bild und Bildinformation anzeigen

JavaScript - Audiodateien per Button-Klick abspielen

MySQL - Tabelle nach 7 Tagen leeren