max-width bei einem Bild arbeitet nur mit Prozent, nicht mit Pixeln

  • CSS

SSL ist deaktiviert! Aktivieren Sie SSL für diese Sitzung, um eine sichere Verbindung herzustellen.

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    max-width bei einem Bild arbeitet nur mit Prozent, nicht mit Pixeln

    Ich versuche gerade folgendes zu verstehen:

    Warum kann ich mit max-width und einem Pixelwert bei einem Bild nicht erreichen, dass dieses maximal X Pixel breit ist, aber mit dem Browserfenster kleiner wird?

    Das funktioniert also nicht:

    HTML-Quellcode

    1. <img src="https://www.vb-paradise.de/index.php/Attachment/39491-Ostern-2017-VBP-png/" style="max-width: 500px; height:auto;" />

    Das schon:

    HTML-Quellcode

    1. <img src="https://www.vb-paradise.de/index.php/Attachment/39491-Ostern-2017-VBP-png/" style="max-width: 100%; height:auto;" />

    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Das Problem sollte sich mit <img src="..." style="width:100%; max-width:500px;">
    oder <div style="max-width:500px;"><img src="..." style="width:100%;"></div> lösen lassen.

    Zum "warum" würde ich vermuten, dass das Objekt eine implizite Breitenangabe (vom Bild selbst) hat, was dann letztendlich mit width:800px; max-width:500px; vergleichbar wäre. Wissen tue ich es aber nicht.
    Danke, so geht es und die Vermutung klingt plausibel.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Hi,

    die Alternative wär', bei der gewünschten Device-Breite die max-width für das Bild auf 100% zu setzen (die Regel würde nur mit ​!important angewendet weil der Inline-Style gewichtiger ist). Vorteil ist dass man damit flexibler ist wenn es mehrere Bilder gibt für die eine bestimmte Struktur eingehalten werden soll (z.B. bei <= 1000px zeige 2 in einer Reihe). Aber in dem Fall kann man sie auch in Bootstrap-Containern platzieren und den Bildern eine max-width von 100% geben und die Aufteilung komplett über die col-xx-xx Klassen regeln.


    Link :thumbup:


    www.marius-gerum.de
    PHP lernen | Programmierung | Sonstiger Krempel
    Zum Blog | PHP lernen | GitHub | Gists | List of awesome