Szerokość diva dopasowująca się do obrazka Opcje

[404]

Dzień dobry (IMG:style_emoticons/default/smile.gif)

Mam następujący problem:

[HTML] pobierz, plaintext 
<div class="image">
<img src="http://images.pl/image.php?thumb&pId=100000" alt="image">
<p>This is example!</p>
</div>
[HTML] pobierz, plaintext 

Obrazki są wczytywane dynamicznie, mają też różne rozmiary, tekst również. Tekst ma być nałożony na obrazek. Problem w tym, jak zrobić żeby ten paragraf miał szerokość obrazka, tzn. aby tekst nie wyjeżdżał poza obrazek?
Oczywiście mogę, przy wrzucaniu pobierać szerokość obrazka, zapisywać go do bazy i wtedy:

[HTML] pobierz, plaintext 
<p style="width:<?php echo $image['image_width']; ?>">This is example!</p>
[HTML] pobierz, plaintext 

...jednak wolałbym rozwiązać ten problem za pomocą stylów.

Proszę o pomoc.

[dudek90]

Możesz to zrobić w JQuery i wtedy nic nie będziesz musiał zapisywać do bazy. (IMG:style_emoticons/default/smile.gif)

[404]

Chyba nie mam innego wyboru (IMG:style_emoticons/default/smile.gif)

[SpiJay]

Dudek90, co to za rozwiązanie...
Pewnie, że się da.

[HTML] pobierz, plaintext 
<div style="display: inline-block; background: red; position: relative;">
	<div style="width: 100%; background: black; position: absolute; bottom: 0; text-align: center;">test</div>
	<img src="http://th05.deviantart.net/fs29/200H/f/2009/242/3/d/Dream_Eye_by_SpiJay_by_SpiJay.jpg"/>
</div>
[HTML] pobierz, plaintext 

wówczas div o parametrze display: inline-block; przyjmuje szerokość najszerszego elementu wewnątrz, a w naszym przypadku jest to obraz o jakiejś NIEOKREŚLONEJ szerokości, co w rezultacie daje nam przystosowanie szerokości do każdego obrazu wewnątrz tego diva.
Div z position absolute i width: 100%; jest divem opływającym, który ma maksymalną szerokość względem diva z inline-block.

Myślę, że pomogłem,
SpiJay.com

Ten post edytował SpiJay 26.01.2013, 18:57:18

[404]

Tego właśnie potrzebowałem, dzięki (IMG:style_emoticons/default/smile.gif)