• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild in div einpassen / Probleme mit overflow:hidden

B

bmwg

Neues Mitglied
Hallo,
ich habe ein div-Element, das folgendermaßen aussieht:

#imageRotation {
clear: left;
margin: 0 0.2em 0 0.2em;
width: 44.6em;
height: 25.125em;
float: left;
overflow: hidden;
}

Darin läuft eine Foto-Slideshow basierend auf JQuery.Cycle. Zeigt eben verschiedene Elemente dieser Art:
<img src="asdf.jpg" alt="soundso" title="soundso" width="100%"/>Im Chrome sieht alles super aus, im Firefox ist das Bild immer 2px zu breit. Wenn ich bei dem img tag noch height="100%" hinzufüge, kommt überhaupt kein Bild mehr. Wenn ich width=711 mache, passts im Firefox, im Chrome ist es dann die 2px zu schmal. Alle Bilder sind in 714x402px hinterlegt.
44.6em ist vermutlich eine schlechte Breite für ein Bild, da das ja 713,6px wären. Das Problem ist, das eine Umstellung des div auf einen festen Pixelwert mein Layout zerschießen würde. Deshalb dachte ich, wenn das Bild groß genug (714px Breite?) hinterlegt wäre, würde das overflow:hidden doch den ev. vorhandenen Überstand "abschneiden", oder? Aber zumindest im Firefox scheint das ja nicht zu funktionieren.
Kennt jemand eine Möglichkeit, wie ich ein Bild in diese 44.6em einpassen kann?
 
Das Thema lautet Subpixel-Rendering. Das wird unschön. Rettet Frauen und Kinder zuerst.

Das Problem: In CSS ergeben sich etwa beim Einsatz von relativen Größen (%, em, …) oder beim Zoomen einer Seite Abmessungen, die nicht ganzen Pixeln entsprechen. Der Client muss nun einen Weg finden, diese Abmessungen auf einem Bildschirm anzuzeigen, dessen kleinste Darstellungseinheit ein Pixel ist.

Dazu ein Beispiel:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 16px;
                padding: 40px;
            }

            .container {
                width: 450px;
                background: red;
            }

            .item {
                width: 25%; /* = 112.5px */
                float: left;
                background: #0f0;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="item">Item</div>
            <div class="item">Item</div>
            <div class="item">Item</div>
            <div class="item">Item</div>
            
            <div style="clear: both;"></div>
        </div>

    </body>

</html>

Bei mir sieht diese Seite im Firefox wunderbar aus. Alles ist grün, der rote Hintergrund scheint nicht durch. Zum Beispiel im Chrome ist allerdings am rechten Rand ein roter Streifen mit einer Breite von 2px zu erkennen.

Der Firefox nutzt zur Darstellung der 112.5px breiten Elemente einen Algorithmus, der hier abwechselnd 112 und 113px setzt. Das ergibt in diesem Fall (!) eine durchgängig grüne Fläche. Der Chrome rundet dagegen alle vier Elemente auf 112px ab, wodurch am Ende eine Lücke von 2px entsteht.

Eine andere Darstellung dazu (John Resig, 2008):

- John Resig - Sub-Pixel Problems in CSS

Es gibt dafür keine Lösung. Selbst beim Einsatz ganzer Pixel treten beim Zoomen diese Lücken potentiell auf, weil sich nicht jede Pixelangabe ohne Rest durch den Zoomfaktor teilen lässt.
 
Danke für die Antwort. Auch wenn ich eher auf einen kleinen Fehler gehofft hätte, den man schnell beseitigen kann ;)

Was ich jetzt gemacht habe: ich habe den Code für #imageRotation beibehalten. In Firefox und IE funktionierts ja. Dann checke ich per js ( CSS Browser Selector ), welcher Browser verwendet wird. Dadurch kann ich im CSS eine Ausnahme für Chrome definieren.

.chrome #imageRotation {
width: 711px;
}

Ist vermutlich nicht die eleganteste Lösung, aber funktioniert soweit erstmal. Zumindest bei "normalem" Zoomfaktor und größer. Beim Verkleinern kommts im Chrome auch wieder zu Verschiebungen. Aber das kann ich in meinem Fall vernachlässigen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben