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
Quelltext: Siehe Kommentar (#11)
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<picture>
CSS - Mit import mehrere CSS-Dateien zusammenfassen