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: Scroll;
border: Inset 4px #AEAEAE;
margin-top: 5px;
}
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>
Bausteine [Alle Anzeigen]
Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Animierte Box mit Keyframes