responsive Design: Bild in Textelement

[zonky]

Hi,

ich baue eine Webseite im responsive Design auf (noch nicht freigeschaltet...) - funktioniert soweit alles prima...

Eingebundene Bilder werden über

img {width: auto; max-width: 100%; height: auto; vertical-align: middle;}

automatisch angepasst...

Nun habe ich in ein Inhaltselement Text per Contao-Funktion ein Bild eingefügt "Top + Float Right" - das wird erst kleiner, wenn der "Container" (ce_text) an dem Bild angekommen ist.

Ich könnte natürlich für das Bild ausrechnen wieviel die Bildbreite bezogen auf die Containerbreite in Prozent ausmacht und das CSS anpassen - gibt es dazu einen eleganteren Weg?

Gruss zonky

[fall2out]

Hat jemand schon eine Antwort darauf? Würde mich auch interessieren... :-)

[psren]

Naja, du wirst ja bestimmt irgendeine regel haben wie groß deine Bilder im text sind/sein können.

Du kannst den Bildern einfach mittels CSS Media-Querys ab einer gewissen Bildbreite dem Bild den Float wegnehmen.

[zonky]

hmmm... o.k. - denke ich mal drüber nach...

[Bennie]

Das Problem hier ist, dass der figure tag per inline-style die float-Anweisung bekommt, jedenfalls dann wenn man in den Bildeinstellungen die Bildausrichtung nutzt und die Abstände eingibt.
Das habe ich dann in den media queries mit

figure[style] {float:none !important; padding:0 !important;}

überschrieben.
Gibt es vielleicht noch bessere oder elegantere Methoden ?

LG
Bennie

[psren]

Nein, wenn es als inline-Style von Contao drin ist, dann nicht.