Placer des images dans des cadres

27 août 2009, 10:18

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 : Tout sélectionner

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

27 août 2009, 10:48

De deux choses l'une : soit tu fais en sorte que les photos aient toutes les mêmes dimensions soit tu fais en sorte que tes cadres soient étirables (une piste possible est évoquée sur cet article d'Alsacréations).

27 août 2009, 14:20

J'ai pris la solution du cadre étirable, mais je ne pas trop comment faire, parce qu'avec ce que j'ai fait je suis obligé de faire un position:relative; et un top:Xpx; et left:Xpx; à chaque fois !
sinon ça me donne ça :

avec ce code là :

Code : Tout sélectionner

<span style="margin-top:-150px; margin-left 300px;">
	<img src='./img/cadre-photo-left.png' style="border: none; display: block; overflow:hidden;" />
	<span style="background-image:url('./img/cadre-photo-middle.png'); background-repeat:repeat-x; width:<?php echo $img_2-4;?>px; height:74px; border: none; display: block;">
		<img <?php echo $img1; ?> src="./img/photos/2.jpg" style="border: none; display: block;"/>
		<img src='./img/cadre-photo-right.png' style="border: none; display: block; "/>
	</span>

27 août 2009, 15:28

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

Code : Tout sélectionner

   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:

Placer des images dans des cadres

Qui est en ligne