Img im div Container an größe anpassen...

[anonymoz]

Hallo Zusammen,

ich sitze gerade an einem Problem und hoffe auf eure Hilfe.

Ich möchte ein Bild innerhalb einem div Container floaten und möchte, dass das Bild immer die gleiche Höhe hat wie der Container, der sich in der Höhe dem Text anpasst. Auf manchen PCs, unabhängig vom Browser ist Arial oder ein andere Serifen Schrift installiert (Linux, Mac) und dies führt dazu das der Text unterschiedlich lang ist und so entsprechend der Container manchmal eine andere Höhe hat.

Code:

<div>
<img w= y= float:right>
<p>Text</p>
</div>

Eine Lösung wäre alle eine bestimmte Schrift zu benutzen mit Webfonts etwa. Oder jedem Container eine feste Höhe geben, aber das wäre umständlich.

Bin dankbar für Ideen...

 

[mermshaus]

Willkommen im Forum.

Ich glaube nicht, dass das ohne den Einsatz von JS möglich ist. Auch mit dürfte es schwierig werden.

Hast du den gewünschten Effekt schon mal irgendwo gesehen?

 

[anonymoz]

Danke für die herzliche Aufnahme. Nein bisher nicht, aber die meisten würden nie ein Bild über die ganze Höhe floaten lassen. In meinem Fall ist es eine Vorgabe. Scripte wollte ich nicht einsetzen.&nbsp;

 

[mermshaus]

Wenn du height: 100%; verwendest, muss das Elternelement meines Wissens eine vorab definierte Höhe haben. Die kann es aber nicht haben, wenn sich die Höhe je nach Textinhalt ändern soll.

Absolute Positionierung fällt wohl raus, weil du das Bild dann aus dem normalen Fluss nimmst. Dann „verdrängt“ es den Text nicht mehr.

Wenn es eine Lösung dafür gäbe, bräuchten wir vermutlich auch Ansätze wie Faux Columns nicht.

- A List Apart: Articles: Faux Columns