Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    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 =)
    Stichworte: css, firefox, html
  • #2
    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

    Kommentar

    • #3
      Zuletzt geändert von FloRic; 06.03.2010, 12:40. Grund: nicht alles
      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.

      Kommentar

      • #4
        Zitat von FloRic Beitrag anzeigen
        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.
        http://vlmedia.de

        Kommentar

        • #5
          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

          Kommentar

          • #6
            Anstatt des Bildes etwas in diese Richtung: (Wie oben schon erwähnt)

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

            Kommentar

            • #7
              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

              Kommentar

              • #8
                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.

                Kommentar

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

                  Kommentar

                  • #10
                    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...

                    Kommentar

                    • #11
                      Bitte beachten: Anmerkungen zu Crosspostings

                      [MOD: Thread geschlossen]
                      [COLOR="#F5F5FF"]--[/COLOR]
                      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                      [COLOR="#F5F5FF"]
                      --[/COLOR]

                      Kommentar

                      Vorherige Weiter
                      Lädt...
                      X