Bilder beim laden in der Breite skalieren

  • Moin,
    leider skaliert das Forum Bilder ja erst, wenn sie geladen sind. Theoretisch müsste es ja genügen, die Breite von imgs in divs der Klasse postbody im vornerein auf 100% zu setzen oder? Dann sollte sie ja schon während des Ladevorgangs passen. Fragt sich nur noch, wie man das mit Smileys löst, haben die ne extra Klasse? Gerade nicht nachgesehen. Das da wäre jedenfalls nen Ansatz:

    Code
    div.postbody img 
    {
    	width: 100%; /* 100% bezogen auf die Breite vom Muttterdiv */
    }

    Kann mal jemand was in der Richtung ins CSS einbauen?

    Falls die Smileys in keiner Klasse sind (warum nicht? :o), könnte man eventuell auch mit jQuery Ausnahmeregelungen machen und das CSS nur auf bestimmte img applyen, die nicht zu diesen Ausnahmen gehören.

  • max-width statt width und die Sache ist gegessen. Dafür gibt es dieses Attribut doch. Also bitte mittels max-width in CSS umbauen. Und den protoype-Skalierer braucht man dann auch nicht mehr.

  • Wenn die meisten hier verwendeten Bilderhoster ausreichend schnell liefern würden, wäre das ein viel kleineres Problem.

    PGP-Key E384 009D 3B54 DCD3 21BF  9532 95EE 94A4 3258 3DB1 | S/MIME-Key 0x1A33706DAD44DA
    G d-@ s+:- a--- C+++ UB+L++ P--- L++@ E-@>++ W+ N o? K? w>++ !O !M !V PS+++ PE-- Y+>++ PGP++>+++ !t 5? X? !R tv b+++>++++ DI !D G>+ e>+++ h !r>++ !z
    „Die Aachener gelten als Erfinder des 4. Hauptsatzes der Thermodynamik: ‚Thermo schreibt man zweimal.“‘
    “Saying that Java is good because it works on all platforms is like saying oral sex is good because it works on all sexes.”
    „Es gibt 10 Sorten von Leuten: Die einen verstehen das Binärsystem, die anderen nicht.“
    „Manche Männer lieben Männer, Manche Frauen eben Frauen; Da gibt's nix zu bedauern und nichts zu staunen; Das ist genau so normal wie Kaugummi kauen; Doch die meisten werden sich das niemals trauen“

  • Bei teilweise 2-3MB großen Dateien nutzt einem der beste Hoster nicht, es scheitert dann eher an der Anbindung der Endgeräte. Die Bildhoster die hier so verwendet werden sind da alle flott genug. Aber wenn halt die Bilder so groß sind, muss man halt ne max-width setzen zum fixen. So what? Eine Zeile CSS.


  • Die Bildhoster die hier so verwendet werden sind da alle flott genug.

    Nö.

    PGP-Key E384 009D 3B54 DCD3 21BF  9532 95EE 94A4 3258 3DB1 | S/MIME-Key 0x1A33706DAD44DA
    G d-@ s+:- a--- C+++ UB+L++ P--- L++@ E-@>++ W+ N o? K? w>++ !O !M !V PS+++ PE-- Y+>++ PGP++>+++ !t 5? X? !R tv b+++>++++ DI !D G>+ e>+++ h !r>++ !z
    „Die Aachener gelten als Erfinder des 4. Hauptsatzes der Thermodynamik: ‚Thermo schreibt man zweimal.“‘
    “Saying that Java is good because it works on all platforms is like saying oral sex is good because it works on all sexes.”
    „Es gibt 10 Sorten von Leuten: Die einen verstehen das Binärsystem, die anderen nicht.“
    „Manche Männer lieben Männer, Manche Frauen eben Frauen; Da gibt's nix zu bedauern und nichts zu staunen; Das ist genau so normal wie Kaugummi kauen; Doch die meisten werden sich das niemals trauen“

  • Das Problem mit "width: 100%" hat DosAmp bereits erklärt. Nicht nur kann das MyBB Smilies nicht als solche kennzeichnen (Smilies werden zu Bilder konvertiert ohne weitere Metainformationen), auch alle anderen Bilder (z.B. Leute die eigene Smilies via [img] einbinden) hätten Probleme.

    "max-width: 100%" hingegen funktioniert bei Bildern nicht, es ist nur auf Blockelemente anwendbar. Gleiches Problem wie bei der Top 20. https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

    Nachtrag: Okay, das mit den Blockelementen stimmt so nicht ganz. Aber dass die Bilder Teil von Tabellen sind ist das Problem.

    Einmal editiert, zuletzt von gandro (6. April 2014 um 19:58)

  • Dann verwend halt nen ordentlichen. Ist ja nicht so, dass es da keine gäbe.

    Ja das Problem sind ja die anderen, die immer so Müllhoster nehmen.

    PGP-Key E384 009D 3B54 DCD3 21BF  9532 95EE 94A4 3258 3DB1 | S/MIME-Key 0x1A33706DAD44DA
    G d-@ s+:- a--- C+++ UB+L++ P--- L++@ E-@>++ W+ N o? K? w>++ !O !M !V PS+++ PE-- Y+>++ PGP++>+++ !t 5? X? !R tv b+++>++++ DI !D G>+ e>+++ h !r>++ !z
    „Die Aachener gelten als Erfinder des 4. Hauptsatzes der Thermodynamik: ‚Thermo schreibt man zweimal.“‘
    “Saying that Java is good because it works on all platforms is like saying oral sex is good because it works on all sexes.”
    „Es gibt 10 Sorten von Leuten: Die einen verstehen das Binärsystem, die anderen nicht.“
    „Manche Männer lieben Männer, Manche Frauen eben Frauen; Da gibt's nix zu bedauern und nichts zu staunen; Das ist genau so normal wie Kaugummi kauen; Doch die meisten werden sich das niemals trauen“


  • display: inline-block;

    verhält sich wie Inline, aber Block-Properties gehen.


    Wie gesagt, das Problem sind die Tabellen, hab das inline-block bereits probiert. Mir ist nicht ganz klar wo das Problem liegt, aber es ist nicht trivial, sonst hätte ich das damals schon mit max-width gelöst.

    Könnt ja selber die whfimageresize.js blockieren und mit Firebug/Webinspektor die CSS-Properties durchtesten.

    Einmal editiert, zuletzt von gandro (6. April 2014 um 20:04)


  • eher was statt wer
    ist pixelbanane zu lahm? :traurig:

    Nein, Pixelbanane is supi im Vergleich… aber den kaputten AAAA-Record solltest du mal rausnehmen.

    PGP-Key E384 009D 3B54 DCD3 21BF  9532 95EE 94A4 3258 3DB1 | S/MIME-Key 0x1A33706DAD44DA
    G d-@ s+:- a--- C+++ UB+L++ P--- L++@ E-@>++ W+ N o? K? w>++ !O !M !V PS+++ PE-- Y+>++ PGP++>+++ !t 5? X? !R tv b+++>++++ DI !D G>+ e>+++ h !r>++ !z
    „Die Aachener gelten als Erfinder des 4. Hauptsatzes der Thermodynamik: ‚Thermo schreibt man zweimal.“‘
    “Saying that Java is good because it works on all platforms is like saying oral sex is good because it works on all sexes.”
    „Es gibt 10 Sorten von Leuten: Die einen verstehen das Binärsystem, die anderen nicht.“
    „Manche Männer lieben Männer, Manche Frauen eben Frauen; Da gibt's nix zu bedauern und nichts zu staunen; Das ist genau so normal wie Kaugummi kauen; Doch die meisten werden sich das niemals trauen“

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!