Placer des images dans des cadres

Placer des images dans des cadres - HTML/CSS - Programmation

Marsh Posté le 27-08-2009 à 10:16:36    

Bonjour à tous !
 
Voici la page de mon site :  
http://i81.servimg.com/u/f81/11/31/25/01/accuei10.jpg
 
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 :
  1. function cadrer_au_milieu_left($width,$height,$numero_photo)
  2. {
  3. if( ($height > $width) )
  4.  $deplus_en_left = round(( 52 - (52*($width/$height)) )/2);
  5. else
  6.  $deplus_en_left = 0;
  8. return $deplus_en_left;
  9. }


 
Mais ça me donne cela :
 
http://i81.servimg.com/u/f81/11/31/25/01/accuei11.jpg
 
les images sont mal cadrés.
 
Merci d'avance

Reply

Marsh Posté le 27-08-2009 à 10:16:36   

Reply

Marsh Posté le 27-08-2009 à 12:08:42    

Fait en sorte que les attribut de l'<img> soit agrandie comme il se doit pour répondre à la taille minimum (meme si ça deborde)...
C'est à toi de faire la fonction nécessaire en PHP (ou JS si t'en accepte les défaut d'accessibilité)
Met cette image dans une div qui a la taille et la position qui s'ajuste au cadre... et dont l'overflow est "hidden"...
A toi de jouer sur la position de l'img pour cadrer le centre...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 27-08-2009 à 14:03:47    

Quand tu dis : "Fait en sorte que les attribut de l'<img> soit agrandie comme il se doit pour répondre à la taille minimum (meme si ça deborde)... " tu penses à quoi exactement ? Je dois toucher aux attributs height et width ?
 
Edit : En fait j'aimerais que ça soit le cadre qui s'ajuste par rapport à l'image,
 
J'ai crée trois images :  
http://i81.servimg.com/u/f81/11/31/25/01/cadre-10.png
 
image faisant 1px de largeur que je répète à l'horizontal :
http://i81.servimg.com/u/f81/11/31/25/01/cadre-11.png
 
http://i81.servimg.com/u/f81/11/31/25/01/cadre-12.png
 
Et avec ce code :  

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


dans la class img j'ai juste : border: none; display: block;
Pour éviter les 5 pixels de contour autour de l'image
 
 
j'obtiens ça :
 
http://i81.servimg.com/u/f81/11/31/25/01/sans-t10.png


Message édité par ozone--24 le 27-08-2009 à 14:29:17
Reply

Marsh Posté le 27-08-2009 à 14:34:40    

Oui, je parle de width et height de la balise...
Sinon, decouper ton cadre en soit pour que ce soit le cadre qui s'adapte et non l'image n'est pas focément une bonne idée...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 27-08-2009 à 15:22:30    

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

Code :
  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:

Reply

Marsh Posté le 27-08-2009 à 19:00:23    

Ah wai, t'es du genre à mettre des <div> dans des <span> ... [:implosion du tibia] ...
C'est un peu bidoeille et bricole maladroite ce que tu nous fait là, pour quel occasion tu fais un tel projet ?
Je ne veux pas être méchant, mais si on te dis d'apprendre les bases du XHTML/CSS ce n'est pas pour te faire chier hein...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 27-08-2009 à 22:10:58    

En fait j'ai fait un stage dans une entreprise d'informatique qui fait des sites de rencontres (www.dial24.fr par exemple, ils ont tous les dial[n°département] et rencontre-[ville] et aussi les rdv[n°département]) de 10 semaines de avril à Juin pour la fin de mon DUT informatique, pendant lesquelles j'ai dû réaliser une plateforme de blog.  
Ensuite, vu qu'ils étaient content de moi, j'ai été embauché en CDD de deux mois pendant l'été.  
 
Vu qu'ils ont qu'un ingénieur informaticien dans la boîte qui travaille un peu vieux de la vieille et qui a appris le HTML/CSS/PHP sur le tas et c'est pas un pro dans le webdesign, je réalise quelques projets pour "rénover" les sites des rencontres de la boîte. J'ai fait une plateforme d'e-mailing et en ce moment je refais le design de la page d'accueil d'un groupe de site de la boîte (actuellement ça donne ça la page d'accueil : http://www.dial75.fr), si tu regardes les sources je pense qu'à côté je code comme le roi des développeur Web (enfin pas quand même ^^).
 
J'ai appris un peu sur le tas moi aussi, par 4h de cours à l'IUT, par des copains qui codent et par des tutos sur internet.
 
 
Voila tout :-)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed