Bilder Zoom-Funktion mit CSS
Es muss nicht immer JavaScript sein wenn man Bilder mit einer Zoom-Funktion ausstatten möchte, CSS bietet diese Möglichkeit auch, unterstützt wird dies vom Mozilla Firefox, Microsoft Edge und Google Chrome.
Bild mit Zoom-Funktion
Wenn man mit dem Mauszeiger über das Bild fährt wird dieses vergrößert.

CSS-Angabe:
<style>
img.beispiel1 {
transition: transform 0.2s;
}
img.beispiel1:hover {
transform: scale(2.0, 2.0);
}
</style>
<img src="bild.png" class="beispiel1">
Die Anweisung transition: transform
leitet die Transformation ein.
Dahinter folgt die Dauer der Transformation 0.2s
(in Sekunden).
Mit der Pseudoklasse :hover
wird die Transformation ausgeführt.
Die Anweisung scale(2.0, 2.0)
gibt den Faktor an um wie viel die
Transformation geändert werden soll.
Die Geschwindigkeit verlangsamen

CSS-Angabe:
<style> img.beispiel2 { transition: transform 0.8s; } img.beispiel2:hover { transform: scale(2.0, 2.0); } </style> <img src="bild.png" class="beispiel2">
Das Bild verzerren

CSS-Angabe:
<style> img.beispiel3 { transition: transform 0.5s; } img.beispiel3:hover { transform: scale(2.0, 1.0); } </style> <img src="bild.png" class="beispiel3">
Das Bild verkleinern

CSS-Angabe:
<style> img.beispiel4 { transition: transform 0.5s; } img.beispiel4:hover { transform: scale(0.5, 0.5); } </style> <img src="bild.png" class="beispiel4">
Experementieren Sie ein wenig mit den Werten, dabei kommen besondere Effekte heraus.
Zoom-Funktion mit JavaScript
Bild zoomen, über die Scrollleisten kann dann zum gewünschten Bildausschnitt gescrollt werden.

<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="img/m.jpg" id="img"></div>
Tipps
Bild vergrößern mit dem „Checkbox Hack”
Zeichenkodierung Formulare CSRF-Token Inhaltsverzeichnis Webseitenschutz Zeitansage Audio-Player Formular befüllen Zugriffsrechte Sprachumschaltung Chatroom RSS Feed Zeitbalken Linkliste Parallax Scrolling-Effekt Sitemaps-Protokoll Quelltext Silbentrennung Metadaten JSON Dynamische Seiten Gästebuch Passwortschutz Berechnungen Regenbogen Text