Placer des images dans des cadres

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Placer des images dans des cadres

ozone--24

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 :

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

Publicité

abais

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.

ozone--24

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 :

image faisant 1px de largeur que je répète à l'horizontal :

Et avec ce code :

Code :

<img src='./img/cadre-photo-left.png' class="img" />
<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;">
<img <?php echo $img1; ?> src="./img/photos/1.jpg" class="img" style="overflow:hidden;"/>
<img src='./img/cadre-photo-right.png' class="img"/>
</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 :

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

abais

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.

ozone--24

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

Code :

<span style="position:relative; top:6px; left:-20px;">
<div style="background-image:url('./img/cadre-photo.png'); background-repeat:no-repeat; height:79px;">
<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;"/>
</div>
</span>

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

abais

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.

ozone--24

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

FORUM HardWare.fr

Programmation

HTML/CSS

Placer des images dans des cadres

Sujets relatifs
[Résolu] Placer le code source d'une page web en buffer (Winnet)	Menustrip à placer n'importe où [RESOLU]
Taille des cadres	Petites images et grandes images...
Intégrer des images dans un jar avec NetBeans	[Applet] Envoyer des images via un applet java
Placer des process en queue	Afficher des images sur une page web de manière aléatoire.
[PHP] Précédent/Suivant dans une galerie d'images	Apache : images non affichées aléatoirement
Plus de sujets relatifs à : Placer des images dans des cadres

Page générée en 0.055 secondes