DIV-Größe unabhängig vom Text machen

[PieceOfCake]

Ich habe ein DIV für die Anzeige eines Bildes. Unter dem Bild steht Text. Die Breite des DIVs ist auf "auto", da die darin angezeigten Bilder immer andere Breiten haben.

Problem ist jetzt: Wenn unten drunter zu viel Text steht ohne manuellen Zeilenumbruch mittels <br/>, dann wird das DIV breiter. Ich möchte aber, dass sich die DIV-Breite nur an der Breite des Bildes orientiert und der Text dann eben automatisch umgebrochen wird.

Ist das irgendwie möglich?

Danke für eure Hilfe!

[wbartl]

Ich würde in diesem div ein eigenes div für den Text mit width 100% machen. Jetzt mal auf die Schnelle...

[Straighter]

Ich würde in diesem div ein eigenes div für den Text mit width 100% machen. Jetzt mal auf die Schnelle...

Wieso ein DIV machen, wenn die width dann wieder 100% wird?

Zweites DIV um den Text mit max-width.

[Melegrian]

Würde zuerst den Lösungsansatz von wbartl testen, denn bei einem Wert für max-width müsstest Du ja von der kleinstmöglichen Bildbreite ausgehen. Du könntest Dir eventuell aber auch einen Wert mit PHP getimagesize oder mit JavaScript einfach holen.

[wbartl]

Naja mit width 100% wird das div für den Text genau die Breite des Bildes haben.

Mit max-width 100% kann das div auch kleiner sein, wenn der Text kürzer ist.

Das wird erst einen Unterschied machen, wenn beispielsweise der Hintergrund des Textes eingefärbt werden soll.

Es wird also beides funktionieren, je nachdem was der TE bezweckt. Ein Problem sehe ich nur, wenn das Bild kleiner ist als das längste Wort des Textes, denn innerhalb eines Worts wird ja bei unserer Lösung nicht umgebrochen.

[Melegrian]

Kann nicht beides funktionieren, wenn ein Bild 200px und ein anderes 400px breit ist, dann müsste ja max-width auf 200px begrenzt werden, was einem Bild von 400px und bei mehr als drei sich ergebenen Umbrüchen im Text vermutlich einfach nur bescheuert aussehen würde.

[wbartl]

Darum habe ich ja geschrieben 100 Prozent, dann richtet es sich nach der Bildbreite. In Pixel kann man das eh nicht angeben.

Und ja, du hast recht, vermutlich wird das bescheuert aussehen, wegen der Umbrüche. Aber auch wegen der verschieden großen Bildern, das muss doch extrem unruhig aussehen.

Aber da wir eh nicht wissen, wie das beim TE wirklich aussieht, bzw. geplant ist, raten wir sowieso nur herum.

Ich denke einen Lösungansatz haben wir ihm schon gegeben, mal sehen, ob er sich überhaupt noch einmal meldet.

[Melegrian]

Ja, hast recht, war mein Denkfehler, weil ich width:100% und max-width: in px meistens nur zusammen verwende, um falls erforderlich eine maximale Breite vorzugeben.

[nerd]

Ist das nicht eher ein "display"attribut fuer das text-element? Wenn du es auf inline oder inline-block setzt, sollte der text ja automatisch umbrechen wenn der umgebende container die breite begrenzt; ohne noch irgendwelche breiten anzugeben.
Wenn du fuer den text unterm bild in ein <p> setzt, sollte es ohne weitere anpassungen klappen.

Also so:

Code: Alles auswählen

<div class="foto">
<img src="bild.jpg">
<p>Bildbeschreibung hier</p>
</div>

[manori]

https://www.intensivstation.ch/css/textumbruch/

Ungeprüft. Details musst du probieren. Ggf. in Kombi mit max-width.

[top]

Das hier scheint zu funktionuckeln:

https://jsbin.com/xiyevovelixu/1

Wie Browserkompatibel es ist müsstest du aber selbst ausprobieren.

[PieceOfCake]

Danke an alle für die Tipps!
Habe alles ausprobiert und es leider immer noch nicht hinbekommen.

Es geht im folgendes Image-Script:
https://www.top10listen.de/testimg2.php

Das title-Attribut des Thumbnail-Bildes wird automatisch als Beschreibungstext des vergrößerten Bildes verwendet.

Ich habe leider wenig Ahnung von Javascript, habe aber die js-Datei so anpassen können, dass ein <p>-Tag um den Text ist, das hat nichts verändert.

Auch ein inneres DIV mit width 100% hat nicht geholfen, der Text steht immer noch nach rechts über

Die Breite dynamisch generieren kann ich nicht, da ich in der js-Datei ja kein php verwenden kann und ich von javascript wie gesagt nichts verstehe.