Discussion :

[jeff24]

Bonjour à tous !

Voici la page de mon site :


Et j'aimerais placer des photos dans les cadres.
Mais les photos que je veux placer ne sont pas de la même taille (longueur et largeur différente d'une photo à une autre).

Est-ce que quelqu'un aurait une solution pour placer correctement les photos ?
J'ai essayé avec position: relative en décalant à chaque fois pour chaque cadre, et en calculant la taille de l'image, en rajoutant tant de pixels en haut si l'image est plus grande en largeur qu'en hauteur et tant de pixels à gauche si l'image est plus grande en hauteur qu'en largeur.
Extrait de mon code (ajouter tant de pixels sur la gauche... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function cadrer_au_milieu_left($width,$height,$numero_photo)
{
	if( ($height > $width) )
		$deplus_en_left = round(( 52 - (52*($width/$height)) )/2);
	else
		$deplus_en_left = 0;
 
	return $deplus_en_left;
}

Mais ça me donne cela :



les images sont mal cadrés.

Merci d'avance

[jeff24]

Finalement j'ai réussi, j'ai fait des span avec des div plus un <img/>
voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
   1. <span style="position:relative; top:6px; left:-20px;">
   2.  <div style="background-image:url('./img/cadre-photo.png'); background-repeat:no-repeat; height:79px;">
   3.   <img <?php echo $img1;?> src="./img/photos/1.jpg"  style="overflow:hidden; position:relative; top: <?php echo $ajout_image_1_top;?>px; left: <?php echo $ajout_image_1_left;?>px;"/>
   4.  </div>
   5. </span>

ça fait très bidouille, mais bon ça marche :rolleyes:

[HiRoN]

ça fait très bidouille, mais bon ça marche

Mais cela ne passera malheureusement pas le validateur W3C... (élément block dans un élément inline)

[jeff24]

Mais cela ne passera malheureusement pas le validateur W3C... (élément block dans un élément inline)

Je veux bien faire d'une autre façon, mais pour l'instant j'ai trouvé que celle-ci qui marche... donc si quelqu'un a une idée, je prends !! ^^

[HiRoN]

Je veux bien faire d'une autre façon, mais pour l'instant j'ai trouvé que celle-ci qui marche... donc si quelqu'un a une idée, je prends !! ^^

Théoriquement, mettre :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>
<img src="..." ... />
</div>

Devrait suffire (me semble-t-il), si le CSS est bien construit.
Le div prendrait en fond le "cadre", et l'image via des marges bien définis viendrait se positionner au bon endroit.

J'ai un peu de mal à comprendre le "position:relative;" sur l'image car personnellement, je l'aurais passer en display:block + taille + marge...