Twilo: Breite eines divs an Bildbreite anpassen

Hallo,

wie kann ich es erreichen, dass das div, welches um ein Bild ist, von der Breite nicht kleiner wird, als das Bild selber?
Wenn man im IE und im Firefox den Schriftgrad auf klein stellt, wird der Text des daneben liegenden divs über das Bild angezeigt.

Der Blaue Rahmen zeigt die Größe des divs, der rote Rahmen die Größe des Bildes.

Screenshot1: Firefox mit normaler Schriftgröße

Screenshot2: Firefox mit sehr kleiner Schriftgröße

Beispielseite

mfg
Twilo

  1. Hi

    Du gibst dem Div width:14em;. Wenn sich dich Schriftgröße verkleinert, wird auch das div logischerweise kleiner (em bezieht sich auf die Schriftgröße). Gib dem Bild auch eine relative Größe mit em

    mfg
    Genie

  2. Hallo,

    wie kann ich es erreichen, dass das div, welches um ein Bild ist, von der Breite nicht kleiner wird, als das Bild selber?

    Warum verwendest du für den Container nicht einfach die gleiche Maßeinheit, wie für das Bild?

    mfg. Daniel

    1. Hallo,

      wie kann ich es erreichen, dass das div, welches um ein Bild ist, von der Breite nicht kleiner wird, als das Bild selber?

      Warum verwendest du für den Container nicht einfach die gleiche Maßeinheit, wie für das Bild?

      der Container soll, proportional mit der Schriftgröße, mitwachsen.

      Kann man überhaupt em Werte bei Bilder angeben?
      Das Bild, welches ich verwende, hat eine Größe von 210 x 190 Pixel.

      mfg
      Twilo

      1. Hi

        der Container soll, proportional mit der Schriftgröße, mitwachsen.

        Kann man überhaupt em Werte bei Bilder angeben?

        Ja, aber bitte nicht mit HTML-Attributen sondern mit CSS-Eigenschaften

        mfg
        Genie

      2. Hallo,

        wie kann ich es erreichen, dass das div, welches um ein Bild ist, von der Breite nicht kleiner wird, als das Bild selber?

        Warum verwendest du für den Container nicht einfach die gleiche Maßeinheit, wie für das Bild?

        Kann man überhaupt em Werte bei Bilder angeben?

        ja (dann natürlich mit CSS, nicht im width-Attribut). Allerdings leidet die Bildqualität in nicht-cairos (also alles, was nicht Firefox 3.x oder Opera[1] heißt) derzeit noch darunter.

        der Container soll, proportional mit der Schriftgröße, mitwachsen.

        Die Frage ist, was mit dem Bild passieren soll.

        Soll es kleiner werden -> gib die Größe in 'em' an.
        Soll der Container mindestens so groß wie das Bild sein -> gib ihm eine Mindestbreite in 'px'

        [1] Wobei es hier noch die Einschränkung gibt, dass min Bilder zwar gut verkleinern kann, sie aber bei Vergrößerung pixelig werden.

        mfg. Daniel

        1. Hallo,

          wie kann ich es erreichen, dass das div, welches um ein Bild ist, von der Breite nicht kleiner wird, als das Bild selber?

          Warum verwendest du für den Container nicht einfach die gleiche Maßeinheit, wie für das Bild?

          Kann man überhaupt em Werte bei Bilder angeben?

          ja (dann natürlich mit CSS, nicht im width-Attribut).

          das war wohl zu einfach :-)

          danke an euch beiden!

          mfg
          Twilo

  3. Hallo Twilo

    Wenn man im IE und im Firefox den Schriftgrad auf klein stellt, wird der Text des daneben liegenden divs über das Bild angezeigt.

    Dann lass doch einfach die Breite weg, und regle den Abstand mittels margin oder/und padding.
    Gefloatete Container nehmen normalerweise die Breite ihres breitesten Inhalts an.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!