Zur Navigation

Bilder mit CSS vergrößern

1 Spider67

Hallo, ich komme aus Österreich und bin ein ziemlicher Laie bzw. habe mir mein Wissen Großteils selbst beigebracht. Derzeit habe ich folgendes Problem:

Ich möchte, dass ein Bild auf der Seite beim Überfahren mit der Maus vergrößert wird, ohne dass das Bild unscharf wird.

ich habe mit folgendem html Code das Bild in meiner Seite eingefügt:

<p><img src="../bilder/Hegefischen_2019/Hegefischen_2019_Bild_1.JPG" class="zoom" width="300" height="200"></p>

Hier folgt das CSS mit dem das Bild beim Überfahren mit der Maus vergrößert werden soll:

img.zoom {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
}
img.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}

Wenn ich das dann jedoch im Echtbetrieb teste, wird das Bild beim Vergrößern unscharf.. Wie kann ich dies verhindern, bzw. was mache ich falsch oder was fehlt im CSS?

Für ein paar hilfreiche Tipps wäre ich Euch sehr dankbar.

Grüße aus Österreich
Dieter

08.10.2019 11:17

2 Jörg

Wie groß ist denn die Grafikdatei Hegefischen_2019_Bild_1.JPG? wenn sie auf das zweifache von 300px x 200px skaliert werden soll, dann sollte die Datei 600px x 400px groß sein.

08.10.2019 12:33 | geändert: 08.10.2019 12:33

3 Spider67

Hallo,

wie soll ich das verstehen? Ich habe die Datei in den Maßen 300 px x 200px in meinem Bilderordner gespeichert und so in der Seite eingebunden (siehe html Code) beim Skalieren wid sie um den Faktor zwei vergrößert und somit unscharf.

Muss ich die Bilderdatei dann zweimal mit verschiedenen Maßen im Bilderordner abspeichern, oder wie soll ich die Größe des Vorschaublides im Quelltext angeben?

Danke für die Hilfe.

08.10.2019 14:02 | geändert: 08.10.2019 14:03

4 Jörg

Du kannst das Bild mit CSS nicht schärfer stellen, als es von sich aus ist. Wenn das Bild 300 x 200 Pixel hat und du es mit den HTML-Attribunten auf die Hälfte herunterskalierst:

width="150" height="100"

... dann sollte beim Vergrößern auf das Doppelte das Bild noch nicht unscharf werden.

08.10.2019 14:52 | geändert: 08.10.2019 14:53

5 Spider67

Hallo Jörg, verstehe ich Dich dann richtig wenn ich es so löse:

In meinem Bilderordner speichere ich das Bild zB. mit 300px x 200px. Dann definiere ich mit den html Attributen im Code die Größe des Vorschaubildes mit ZB 150 x 100 und durch das CSS wird das Bild dann auf das doppelte vergrößert und nicht unscharf.

Oder ich speichere das Bild im Bilderordner mit 450px x 300px, setze im html dann width="150" und height="100" wenn ich dann im css in der transform Anweisung auf das dreifache skaliere, dann habe ich ein scharfes Bild.

Das Geheimnis liegt also darin, das Vorschaubild mit width und height zu verkleinern und durch die transform Anweisung auf die ungefährt gespeicherte Größe im Bilderordner zu skalieren. Habe cih Dich da richtig verstanden?

Danke für die Hilfe.

08.10.2019 15:07

6 Jörg

Ja, so sollte es funktionieren.

08.10.2019 15:34

7 Spider67

Hallo Jörg,

das funktioniert toll. Vielen Dank.

Tolles Forum, mit echt schneller Hilfe.

LG aus Österreich

Dieter

08.10.2019 22:30

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]