Tutorial HTML, CSS u. PHP - Forum

[Yamram]

Beitrag im Forum

Hey Leute,
da ich voll und ganz auf Google Chrome umgestiegen, fällt mir so einiges garnicht mehr auf. Im Firefox ergibt sich ein Problem mit den Bildern. Es handelt sich um Hintergrundbilder. Diese skaliere ich mit CSS3 und da ergibt sich das Problem. In Google Chrome sieht alles schön aus, aber in FF sieht es schrecklich aus. Total unscharf.

Ansicht Google Chrome:

bild_chrome.png (151.08 KiB) 104-mal betrachtet

Ansicht Mozilla Firefox:

bild_ff.png (150.04 KiB) 104-mal betrachtet

So und nun meine Frage: Was kann ich dagegen tun?!

Ich lasse die Bilder von 512x512 auf 42x42 skalieren.

Mit freundlichen Grüßen,
Philipp E.

[drPHIP132]

Ich sehe keinen unterschied auf den bildern o.O

liegt aber wahrscheinlich daran, dass dieses forum nur so kleine bilddateien erlaubt

Sicher, dass der FF nicht nach 2-3 sekunden nach dem skalieren scharf stellt?

[Basiii]

Skalieren durch Browser kannst du vergessen, ich möchte gar nicht wissen wie manche CSS3 - fähigen (!) Browser das handhaben, Bilder einfach immer gleich auf richtiger Größe speichern.

Außerdem ist es wohl nicht sehr Userfreundlich 512 x 512 Pixel große Bilder zu übertragen wenn sie nur 42 x 42 angezeigt werden (Traffic, Speicherverbrauch, etc.)

[drPHIP132]

Skalieren durch Browser kannst du vergessen

Also wenn du die bilder mit transform: scale(1.01); skallierst kannst du dir sicher sein, dass es noch gut aussieht.
Ich selbst habe das in meinem cms bei den icons gewählt. es sorgt für den wunderschön dezenten effekt wenn der icon ausgewählt ist. es liegt wirklich sanft im auge und es stört nicht.

[Basiii]

Es ist ein Unterschied ob man Bilder um Bruchteile von Prozenten skaliert oder 10 mal kleiner macht.

[drPHIP132]

Ja das ist war.
Ich wollte nur mal sagen/zeigen, dass transform: scale(); nicht grundsätzlich verkehrt ist

[Yamram]

Okay, dann werde ich dich Bilder mal ganz normal mit Gimp skalieren. Und @drPHIP132 ich habe background-size verwendet ;)

EDIT - 21.01.2012 21:07 Uhr

So, alles hat funktioniert. War zwar ein bisschen umständlich aber okay, das Ergebnis ist dafür doppelt so gut ;)

Daaaaaanke Ihr werdet schon bald von meinem Projekt hören