Ankündigung

Einklappen
Keine Ankündigung bisher.

Flex Container für Bilder in Chrome und Opera

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Flex Container für Bilder in Chrome und Opera

    Hallo Leute,

    mir ist beim Entwickeln einer vertikal ausgerichteten Seite ein merkwürdiges Verhalten der Browser Chrome und Opera aufgefallen und mich würde interessieren, wie ihr es löst.

    Diese Seite hat einfach mehrere Container untereinander. Zum Aufbau des Layouts nutze ich Flexbox.

    Manche dieser Container enthalten nichts weiter als eine Farbe und ein Bild bzw. ein Hintergrundbild. Firefox und Edge stellen diese Bild-Container wie gewünscht dar, Chrome und Opera nicht.

    Der Header mit dem Titelbild hat eine kalkulierte height von 100vh - der height der Navigation. Dies funktioniert soweit in Firefox und Edge, für Chrome und Opera musste ich hier dem Container schon die kalkulierte height als min-height mitgeben, damit er überhaupt dargestellt wird. Dies ist soweit kein Problem, da man dem Header in der Regel Endgeräte-unabhängig die volle Höhe des Endgerätes zuschreiben möchte und das Bild dann eben mitskaliert.

    Wie löst man es aber bei Containern, die einfach nur so hoch wie ihr Inhalt sein sollen? Gebe ich keine min-height, werden sie von Chrome und Opera "verschluckt" und gar nicht dargestellt. Eine min-height angeben kann ich aber auch nicht, da sie sich auf die Höhe des Inhaltes beziehen soll. Habe ich hier bspw. ein Bild von 500px, dann läuft alles bis 500px gut, darunter müsste ich aber in Kauf nehmen, dass das Bild nicht mehr vollständig skaliert wie im Firefox und im Edge, sondern durch Media Queries nur noch in Stufen.

    Gibt es hier eine Möglichkeit, um dies zu umgehen?

  • #2
    Gib das Bild halt nicht als Hintergrundbild an, sondern als richtiges Bild, wenn kein Inhalt vorhanden ist. Mit PHP sollte das keine Problem sein.
    Ohne deine Seite zu kennen ist es schwer zu sagen warum dieses Verhalten auftritt, aber grundsätzlich haben leere Blockelemente keine Höhe, irrelevant ist dabei ob eine Hintergrundbild besteht oder nicht. Somit würde ich erst mal behaupten, dass Firefox und Edge hier falsch liegen.

    Kommentar


    • #3
      Hi, dank dir, das Verhaltern trat nicht beim Header mit Hintergrundbild, sondern bei einem Container mit einem normalen Bild auf.

      Ich konnte das Problem aber mittlerweile lösen, es hatte nichts mit dem Flexbox-Layout für die Container und die Bilder zu tun.

      Das Wurzelelement und der body hatten noch aus dem Entwurf, bevor ich den Header mit seiner height / min-height von 100vh - der height der Navigation hinzugefügt hatte, selbst 100% height und ich hatte dies vergessen zu entfernen. Dies schien Firefox und Edge nicht zu stören, Chrome und Opera haben dadurch den Container mit dem Bild wohl "verschluckt".

      Kommentar

      Lädt...
      X