Browser-Zoom -> ungewollter Rand an Bildern (bei Firefox)

FloRic · 06.03.2010, 10:54

Hallo,
ich arbeiten gerade an einem Projekt, wo ein Bild über die gesamte Breite eines DIV-Containers gehen soll. Das war mit CSS auch kein Problem. Ich habe den CSS-Tag zum Testen vorläufig im XHTML-Kontext integriert (<img src="xy.png" style="width:730px;">). Da die einzusetzenden Bilder in etwa mit einer Abweichung von vielleicht 10 Pixeln von den 730 Pixeln auch immer passen, ist das gestreckte oder gezerrte Bild trotzdem gut lesbar.
Aber das Bild hat mit Firefox 3.5 auf Ubuntu (sicher auch Windows) immer einen Teilrand. (Internet Explorer kann ich gerade nicht testen) Wenn ich mit dem browserinternen Zoom wegzoome, verschiebt sich der Rand auch manchmal leicht. Beim Ranzoomen verschwindet der Rand allerdings.
Ich habe es mal mit Opera getestet und da ist kein Rand zu erkenne, egal wie ich zoome.
Habt ihr eine Lösung für mich, wie ich diesen Rand wegbekomme? "border:0px;" habe ich auch schon versucht. Der Validator zeigt keine Fehler in CSS oder XHTML.

In Hoffen auf einen guten Tipp, FloRic =)

php2go · 06.03.2010, 11:09

Hallo

Eine direkte Antwort auf deine Frage kann ich nicht geben.
Aber wieso legst du das Bild mit <img ... /> in den div-Container? Ich würde dem Container das Bild als Hintergrund zuweisen, wodurch das Problem nicht mehr vorhanden sein dürfte!

Gruß, php2go

FloRic · 06.03.2010, 11:31

Entschuldige, da habe ich mich wohl ein bisschen schlecht ausgedrückt.

Ausschnitt (enthält nicht alle DIV-Container!):

PHP-Code:

      <div id="content">
        <div class="intro">
            <h1 class="title">Editor</h1>
            <br />
<img src=xy.png" alt="Alttext" style="width:730px;border:0px;">


        </div>

    </div>

Die umschließenden DIV's sind für das Gesamtlayout. Das Bild selbst habe ich direkt in der Seite.
Durch die darüberliegende Klasse "page" wurde das Textlayout auf 730px Breite begrenzt und ich wollte das Bild mit der exakt gleichen Breite haben. Dabei entsteht dann der Rand.

vitus37 · 06.03.2010, 12:39

Zitat:

Zitat von FloRic

Die umschließenden DIV's sind für das Gesamtlayout. Das Bild selbst habe ich direkt in der Seite.

DIVs sind nicht für das Layout. Sie sind zum Gruppieren mehrerer Elemente, dein Content-DIV beinhaltet nur eines, somit ist dein HTML-Code semantisch schon einmal falsch(oder ist dein Code unvollständig, um den Beitrag nicht so lang zu machen?). Eines DIVs muss raus. Dein <br /> ist ebenfalls falsch, falls du einen Abstand zwischen der Überschrift und dem Bild erreichen möchtest. Das kannst du zB mit

Code:

margin-bottom: 10px;

im CSS bei der Überschrift erreichen.

Das hilft dir bei deinem Zoom-Problem zwar vermutlich nicht weiter, trotzdem solltest du auf richtige Semantik achten.

FloRic · 06.03.2010, 13:11

Ja, das war klar nur ein Codeausschnitt.
Danke für den Tipp mit der Überschrift.
Aber das mit den ungewünschten Bildrahmen wurde leider trotzdem nicht gelöst

php2go · 06.03.2010, 14:10

Anstatt des Bildes etwas in diese Richtung:

(Wie oben schon erwähnt)

PHP-Code:

  <div style="background-image: url('...'); width: 720px; height: 500px;"></div>

FloRic · 06.03.2010, 14:32

Danke für die Idee.
Wenn man nicht Zoom, ist schon mal kein Rand da, aber das war auch beim <img> ohne fester Breitenangabe so.
Ich habe noch "no-repeat" hinzugefügt, damit das Bild nicht mehrmals kommt.

Leider wird das Bild nicht an die Größe angepasst, sondern einfach abgeschnitten...

Gibt es jetzt noch eine Möglichkeit, dass das Bild gezoomt wird, also genau in die 730 Pixel passt. Die Höhe wäre egal.

CSS Background - da habe ich leider nichts gefunden, wie ich mit CSS das Bild anpassen kann...

Wenn ich mit dem Browser wegzoome entsteht zwar wieder ein Rand, aber das wäre ja nicht so schlimm. Hauptsache wäre, dass das Bild immer eine Breite von 730 Pixeln hat und das in der normalen Ansicht kein Rand wäre, aber alles zu sehen ist.

Gruß, FloRic

FloRic · 07.03.2010, 18:25

Neueste Erkenntnis: Das Problem tritt nur auf, wenn das Bild größer als die Vorgabe ist (z.B. größer als 730px) und gezoomt werden muss.

http://www.kaenguru-sprung.tk/test/test.html

Bei dem Beispiel habe ich oben einmal groß-PNG und groß-JPG, unten klein-PNG und klein-JPG getestet.

php2go · 07.03.2010, 20:00

Also in meinem Browser (FF 3.5.5) treten keine Probleme auf! Keine Ränder ... mitzoomen funktioniert einwandfrei!

FloRic · 07.03.2010, 21:07

Ich verwende die 3.5.8-Version und wenn ich es mit normalem Zoom öffne, sind bei den oberen Beiden schon links und oben ein grauer Rand vorhanden...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Darstellungsfehler im Firefox Browser	Logan9	HTML, Usability und Barrierefreiheit	5	28.04.2006 23:51
Random von Bildern ohne Browser neu laden		PHP Tipps 2005	6	20.01.2005 19:56
Browser FireFox --hast du das gewusst??		Off-Topic Diskussionen	11	23.09.2004 19:09

06.03.2010, 10:54
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Browser-Zoom -> ungewollter Rand an Bildern (bei Firefox) Hallo, ich arbeiten gerade an einem Projekt, wo ein Bild über die gesamte Breite eines DIV-Containers gehen soll. Das war mit CSS auch kein Problem. Ich habe den CSS-Tag zum Testen vorläufig im XHTML-Kontext integriert (<img src="xy.png" style="width:730px;">). Da die einzusetzenden Bilder in etwa mit einer Abweichung von vielleicht 10 Pixeln von den 730 Pixeln auch immer passen, ist das gestreckte oder gezerrte Bild trotzdem gut lesbar. Aber das Bild hat mit Firefox 3.5 auf Ubuntu (sicher auch Windows) immer einen Teilrand. (Internet Explorer kann ich gerade nicht testen) Wenn ich mit dem browserinternen Zoom wegzoome, verschiebt sich der Rand auch manchmal leicht. Beim Ranzoomen verschwindet der Rand allerdings. Ich habe es mal mit Opera getestet und da ist kein Rand zu erkenne, egal wie ich zoome. Habt ihr eine Lösung für mich, wie ich diesen Rand wegbekomme? "border:0px;" habe ich auch schon versucht. Der Validator zeigt keine Fehler in CSS oder XHTML. In Hoffen auf einen guten Tipp, FloRic =)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.03.2010, 11:09
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Hallo Eine direkte Antwort auf deine Frage kann ich nicht geben. Aber wieso legst du das Bild mit <img ... /> in den div-Container? Ich würde dem Container das Bild als Hintergrund zuweisen, wodurch das Problem nicht mehr vorhanden sein dürfte! Gruß, php2go

06.03.2010, 11:31
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Entschuldige, da habe ich mich wohl ein bisschen schlecht ausgedrückt. Ausschnitt (enthält nicht alle DIV-Container!): PHP-Code: `<div id="content"> <div class="intro"> <h1 class="title">Editor</h1> <br /> <img src=xy.png" alt="Alttext" style="width:730px;border:0px;"> </div> </div>` Die umschließenden DIV's sind für das Gesamtlayout. Das Bild selbst habe ich direkt in der Seite. Durch die darüberliegende Klasse "page" wurde das Textlayout auf 730px Breite begrenzt und ich wollte das Bild mit der exakt gleichen Breite haben. Dabei entsteht dann der Rand. Geändert von FloRic (06.03.2010 um 13:40 Uhr). Grund: nicht alles

06.03.2010, 13:11
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Ja, das war klar nur ein Codeausschnitt. Danke für den Tipp mit der Überschrift. Aber das mit den ungewünschten Bildrahmen wurde leider trotzdem nicht gelöst

06.03.2010, 14:10
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Anstatt des Bildes etwas in diese Richtung: (Wie oben schon erwähnt) PHP-Code: `<div style="background-image: url('...'); width: 720px; height: 500px;"></div>`

06.03.2010, 14:32
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Danke für die Idee. Wenn man nicht Zoom, ist schon mal kein Rand da, aber das war auch beim <img> ohne fester Breitenangabe so. Ich habe noch "no-repeat" hinzugefügt, damit das Bild nicht mehrmals kommt. Leider wird das Bild nicht an die Größe angepasst, sondern einfach abgeschnitten... Gibt es jetzt noch eine Möglichkeit, dass das Bild gezoomt wird, also genau in die 730 Pixel passt. Die Höhe wäre egal. CSS Background - da habe ich leider nichts gefunden, wie ich mit CSS das Bild anpassen kann... Wenn ich mit dem Browser wegzoome entsteht zwar wieder ein Rand, aber das wäre ja nicht so schlimm. Hauptsache wäre, dass das Bild immer eine Breite von 730 Pixeln hat und das in der normalen Ansicht kein Rand wäre, aber alles zu sehen ist. Gruß, FloRic

07.03.2010, 18:25
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Neueste Erkenntnis: Das Problem tritt nur auf, wenn das Bild größer als die Vorgabe ist (z.B. größer als 730px) und gezoomt werden muss. http://www.kaenguru-sprung.tk/test/test.html Bei dem Beispiel habe ich oben einmal groß-PNG und groß-JPG, unten klein-PNG und klein-JPG getestet.

07.03.2010, 20:00
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Also in meinem Browser (FF 3.5.5) treten keine Probleme auf! Keine Ränder ... mitzoomen funktioniert einwandfrei!

07.03.2010, 21:07
FloRic Benutzer Registriert seit: 19.10.2009 Beiträge: 39 PHP-Kenntnisse: Anfänger	Ich verwende die 3.5.8-Version und wenn ich es mit normalem Zoom öffne, sind bei den oberen Beiden schon links und oben ein grauer Rand vorhanden...