Gelöscht
-
-
Ein Beispiel 2 Auswirkungen
Du brauchst nur eine Grösse anzugeben, die andere wird vom Browser automatisch ermittelt, Damit hast du immer das richtige Seitenverhältnis.HTML-Code:!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title></title> <style> img.smaller:hover{ width: 100px; } img.bigger:hover { transform: scale(2); } </style> </head> <body> <p> <img src="https://i.imgur.com/HZ5oA1s.png" width="200" class="smaller"> <br> <img src="https://i.imgur.com/HZ5oA1s.png" width="200" class="bigger"> </p> </body> </html>
Klassen und Ids sollten nicht mit einer Ziffer beginnen, benenne sie anständig nach ihrer Funktion oder Aufgabe.
Das erste Bild wird im hover mit fester Breite auf 50% verkleinert, dadurch verschiebt sich der nachfolgende Inhalt.
Beim zweiten Bild wird das Bild mit Hilfe von transform scale vergrössert. Der ursprüngliche Inhalt bleibt an seiner Position.
Probiere es aus.
https://www.html-seminar.de/css3-transform-scale.htm
Kommentar