Bild in div einpassen / Probleme mit overflow:hidden

html.de-Forum HTML, XHTML & CSS
1

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:
soundsoIm 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?

2

Willkommen im Forum.

44.6em ist vermutlich eine schlechte Breite für ein Bild, da das ja 713,6px wären.

Das hängt von der Schrifteinstellung ab. 1em ist nicht 16px.

Kann man das Problem irgendwo in Aktion sehen?

3

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]

<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):

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.

4

Danke für die Antwort. Auch wenn ich eher auf einen kleinen Fehler gehofft hätte, den man schnell beseitigen kann :wink:

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.