nicht angemeldet
Variable Bildbreite und Float
Hallo zusammen,
mal keine Frage, sondern ein Ergebnis, das vielleicht jemanden hilft:
Ich wollte in einem flexiblen Layout ein Bildmotiv in der Breite der Breite des Inhalstbereichs anpassen. Dazu legte ich das Bild als Hintergrundgrafik in ein div und gab dem div noch die gewünschte Höhe:
<div style="background:url('mein_bild.jpg') no-repeat 0 0;height:150px;"></div>
Jetzt ist das Bild immer von Links bis zur Breite des umgebenden Containers zu sehen (das Bild sollte dafür sehr breit sein).
Manchmal möchte man noch einen Text um das Bild fließen lassen. Dafür muß angegeben werden, wieviel Prozent der zur Verfügung stehenden Breite das Bild und wieviel der Text einnehemen und evtl. noch einen Abstand zum Text bestimmen:
<div style="background:url('mein_bild.jpg') no-repeat 0 0;height:150px;width:50%;float:left;margin-right:8px"></div>
<p>viel Text</p>
-
Manchmal möchte man noch einen Text um das Bild fließen lassen.
Wenn man einen Text um ein Bild fließen lassen möchte, ist dieses Bild mit sehr hoher Wahrscheinlichkeit "Inhalt" - aus diesem Grund sollte es nicht als Hintergrundbild eingebunden werden, sondern sinnigerweise als <img />-Element, welches ebenfalls die float-Eigenschaft kennt.
-
Wenn man einen Text um ein Bild fließen lassen möchte, ist dieses Bild mit sehr hoher Wahrscheinlichkeit "Inhalt" - aus diesem Grund sollte es nicht als Hintergrundbild eingebunden werden, sondern sinnigerweise als <img />-Element, welches ebenfalls die float-Eigenschaft kennt.
Ja, mir kam es aber darauf an, die Größe des vom Text umgebenen Bildes dynamisch zu machen, ohne das Bild zu verzerren, das wird mit dem img-Tag schwierig.
-
Ja, mir kam es aber darauf an, die Größe des vom Text umgebenen Bildes dynamisch zu machen, ohne das Bild zu verzerren, das wird mit dem img-Tag schwierig.
Arbeite mit relativen Angaben, em z.B.
-
Hi,
Ja, mir kam es aber darauf an, die Größe des vom Text umgebenen Bildes dynamisch zu machen, ohne das Bild zu verzerren, das wird mit dem img-Tag schwierig.
Nein, wird es nicht. Das Bild bringt seine Breite ja selber mit.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-