Bonjour cher petits amis de la zone.
Un petit problème se présente à moi :
Je me marie dans 15 jours (non, c’est pas ça le problème), et comme j’aime à réinventer la roue, j’ai entrepris de coder une petite galerie à ajouter sur mon site web, (enfin, à coller sur un hébergement que je squatte au taf), pour permettre de centraliser les photos du plus beau jour de ma vie. (j’ai entendu “ou pas”, dans le fond B)).
J’en suis arrivé au passage que je pensais être le plus simple. L’affichage de la photo, grandeur nature.
Comme j’ai pas envie de me faire suer à resizer toutes les photos, j’ai un ptit script php qui me génère des thumbs, et ensuite chaque thumb est linké à la photo originale. Sauf que je ne voudrais pas que la photo originale s’ouvre de ses 4000px x 4000px (“j’ai un appareil 10 miyons de pixels, j’en profite un max”) en défonçant ma mise en page qui est valide xhtml 1.0 strict. (oui ça n’a pas grand chose à faire ici, mais tout d’même, je tenais à m’en féliciter).
Un ptit bout de code valant mieux qu’un long discours… :
[code]côté CSS :
.imgfull {
text-align: center;
border: 1px solid #999999;
padding: 10px;
margin: 5px;
width: 800px;
height: 600px;
}
.imgfull img {
width: inherit;
}
et côté jscript :
enfin, côté XHTML :
[/code]
L’objectif de mon “inherit” uniquement sur la largeur, c’est de laisser l’image (qui peut avoir tous les ratios possibles et imaginables) avoir la hauteur correcte.
Le problème est le suivant : l’image est uniquement resizée sur la hauteur (donc la propriété non fixée par la CSS), ce qui rend l’image abominable pourrie.
Quelqu’un aurait-il déjà rencontré le problème et la solution ? (ça fait 1h que je me gratte la tête…)
Merci d’avance B)
Oui moi. Check le slideshow sur cette page:
http://location-vacances.fr.sprice.com/sea…&lang=fr_fr (cliques sur les photos)
En gros, avec une image, quand tu spécifies une hauteur sans spécifier la largeur, l’image garde le meme ratio. Idem si tu spécifies la largeur, mais pas la hauteur (ou height: auto). Enfin je sais pas si c’est exactement ce que tu cherches…
mmmh, non, c’est pas vraiment ce que je veux. B)
En gros, je veux afficher mon image sur 700px de large (ça je sais faire), et laisser le browser se dépatouiller avec les ratios (ça, lui il sait faire) pour pas que l’image soit “étirée”.
Donc comme je sépare le “fond” de la “forme”, la balise de mon image c’est juste
[code]
.imgfull img {
width: 700px;
}
[/code]
Or il semblerait que lorsque je fixe les dimensions dans la CSS, je ne puisse plus y toucher par le biais du jscript. Si je mets les caracteristiques dans la balise image avec les caracteristiques width=“700px”’>, ça marche, mais ça ne me parait pas très joli.
enfin voilà, au pire j’en mourrais pas, de toute façon pour le moment j’affiche ma photo dans une popup B)
En Javascript, de manière simple (genre en faisant var width= myDomElem.style.width), tu n’as accès qu’aux styles définis inline.
la solution la plus simple est de définir l’attribut css width dans ton code HTML:
![]()
Ah oui effectivement, on s’était mal compris. Mais j’ai ma petite idée sur ton problème: quand t’as la propriété figée dans le CSS, il y a une blague ca ne se retrouve pas sous les même propriétés (du moins sous IE). tu as l’objet style et l’objet currentStyle associé a ta balise. Essaie de modifier la propriété de currentStyle au lieu de style.
(enfin pour moi ca remonte, et j’ai l’habitude d’utiliser des libs comme jquery qui font ce genre de taff pour moi).