Page 1 sur 1

Placer des images dans des cadres

Posté : 27 août 2009, 10:18
par jeff24
Bonjour à tous !

Voici la page de mon site :
Image

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 :

Image

les images sont mal cadrés.

Merci d'avance

Re: Placer des images dans des cadres

Posté : 27 août 2009, 10:48
par Victor BRITO
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).

Re: Placer des images dans des cadres

Posté : 27 août 2009, 14:20
par jeff24
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 :

Image

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>

Re: Placer des images dans des cadres

Posté : 27 août 2009, 15:28
par jeff24
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: