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 Efekte 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”
Veranstaltungsliste Dynamische Seiten Eselsohren Mehrfachauswahl Audiodatei Counter PHPMailer Authentifizierung Affenformular Sicherheit Textgestaltung Inhaltsverzeichnis Sortierung Passwortschutz RSS Feed Seitenformatierung Sprachumschaltung MySQL Keyframes Linkliste Wecker Zeichenkodierung Gästebuch Responsiv Arithmetische Operatoren