2012-04-04 17 views
5

Dies ist mein erster Versuch eines responsiven Designs, also entschuldige mich, wenn das eine dumme einfache Frage ist.Übergroßes Bild ist verschwommen, wenn es reduziert wird

Ich habe ein Bild erstellt und seine maximale Breite auf nicht größer als die tatsächliche Breite des Bildes eingestellt, da ich weiß, dass das Skalieren eines Bildes in verschwommener Gemeinheit resultiert.

Was ich ein wenig verwirrt bin, ist, dass, wie ich aus dem Fenster zusammenziehen und das img beginnt zu schrumpfen, ist es auch verschwommen bekommt ...

das richtige Verhalten und ist es eine Möglichkeit, um dies?

Jede Hilfe wird geschätzt!

+3

das Problem behoben, bei dem Ihr Code ??? Ich denke, es muss verbessert werden – Baba

+0

Wenn Sie das Fenster verkleinern, schrumpft das Bild auch? Ich nehme an, Sie haben die Bildbreite als% und dann eine maximale Breite hinzugefügt? –

+0

Ja, es schrumpft, ich habe das Wrapping div auf einen Prozentsatz und das img-Tag auf width gesetzt: 100%; Höhe: Auto; maximale Breite: 480px; – Stefan

Antwort

4

Wenn Sie Fire Fox verwenden, kann es Probleme beim Skalieren von Bildern geben.

Why is Firefox so bad at resizing images?

Firefox blurs an image when scaled through external CSS or inline style.

Zugabe Anscheinend folgendes CSS hat für einige

image-rendering: -moz-crisp-edges; 
+2

Ich benutze Firefox und tatsächlich scheint es, wenn ich in Safari anzeigen, es korrekt angezeigt wird. Es scheint firefoxspezifisch zu sein, aber das Hinzufügen der obigen Regel hat die Bilder geschärft, aber zu viel, was es tatsächlich schlimmer macht. – Stefan

+0

Ich denke für den Moment ist es akzeptabel, aber ich muss eine bessere Möglichkeit finden, Bilder in einem flexiblen Layout wie folgt anzuzeigen. Danke für die Hilfe. – Stefan

+0

Nice, obwohl das Problem auch in Webkit, zumindest Chrome –

Verwandte Themen