http://ze4lot.pl/temp/div1.jpg

Pisze sobie funkcję wyświetlania obrazków różnych rozmiarów w ramkach i chciałbym uzyskać taki efekt przy użyciu div'ów / CSS i nie mogę sobie z tym poradzić. Raz byłem na dobrej drodze ale znowu IE wyświetlało głupoty...
Figiel polega na tym, że ramka to tylko dwa narożniki które zawsze mają taki sam rozmiar natomiast obrazki wyświetlane w niej już różne rozmiary.

Nie wiem czy to słuszne podejście, ale możesz robić diva troszkę większego niż obrazek i wstawiać do niego (position: absoulte) te trzy grafiki (róg górny, róg dolny, obrazek). Na stronie pozycjonujesz tylko tego diva nadrzędnego. Można by kombinować z before i after, ale IE tego chyba w ogóle nie czyta.
Pozdrawiam

Proponuje tobie zrobic tak:

1) Generujesz .jpg

2) Ustawiasz .jpg na background diva tak aby sie nie powtarzal i rozpoczynal o lewej

3) paddingami/marginami ustawisasz avatar tak aby znajdowal sie pomiedzy

W tym sposobie waazne jest aby .jpg byl odpowiednio spreparowany.

moja funkcja:

[PHP] pobierz, plaintext 
<?php 
function image($img_name,$img_folder,$img_file)
{
	$img_path = $img_folder."/".$img_file;
	echo "
						xxx
			<img src=\"$img_path\" alt=\"$img_name\">
						xxx
 
		  ";
}
?>
[PHP] pobierz, plaintext 

i teraz mój problem to co wstawić za xxx żeby hulało

Nie wiem dokaldnie co ten kod robi ale napisze tobie przykladowy kod html odnosnie mojej propozycji.

[HTML] pobierz, plaintext 
<div class="panel_usera">
<img src="" alt="" />
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#panel_usera {
     background: black url('adres_obrazka.jpg') no-repeat;
}
 
#panel_usera img {
     margin: 5px;
}
[HTML] pobierz, plaintext 

W takim p rzypadku twoj IMG musi byc wiekszy o dodatkowe 5px w gore i w lewo.

@IMP - a) nie rozumiem, grafika ma być nie tknięta.

[HTML] pobierz, plaintext 
<div class="image_tl">
    <div class="image_br">
        <img src="img/obrazek.jpg" alt="obrazek" />
    </div>
</div>
 
i css:
.image_tl {
background:url(adres/obrazka/top/left) no-repeat 0 0;
}
 
.image_br {
background:url(adres/obrazka/bottom/right) no-repeat 100% 100%;
padding:5px; //tutaj nie wiem ile musisz dokładnie
}
.image_br img {
display:block;
}
[HTML] pobierz, plaintext 

Pisane z palca ale powinno działać.