Dimensionner automatiquement la hauteur des images dans bandeau défilant

[le dénicheur]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.le-denicheur.net

Description du problème

Bonjour

Je publie régulièrement des affiches qui défilent en page d'accueil de mon forum,

Je  redimensionne  chaque affiche avec une hauteur de 500 pixels,

Comment faire pour les publier sans être obligé de les redimensionner une par une ?



Bonne journée

Ph, LETESSIER

[Neptunia]

Bonjour ^^



Je serais limite tentée de vous répondre que redimensionner systématiquement est encore la meilleure chose à faire.
Si les images sont plus hautes au départ elles sont aussi plus lourdes à charger et ça pénalise à la fois vos membres et votre référencement.
Je ferme cette parenthèse !

Si vous souhaitez toujours redimensionner vos images sans rien faire, merci de me fournir le code utilisé (2 ou 3 images me suffisent, j'ai pas besoin de la totalité non plus)

[le dénicheur]

Bonjour Neptunia

Je suppose que c'est ce genre de code que vous demandez (j'en ai mis 3 de tailles différentes

https://i.servimg.com/u/f67/13/48/15/99/09-20_22.jpg
https://i.servimg.com/u/f67/13/48/15/99/09-13_14.png
https://i.servimg.com/u/f67/13/48/15/99/09-12_13.jpg

[Neptunia]

Euh non, c'est surtout ce qu'il y a autour des images. Un <marquee> ... </marquee> peut être?

Bref le code déjà présent sur votre panneau admin ...

[le dénicheur]

Euh non, c'est surtout ce qu'il y a autour des images. Un <marquee> ... </marquee> peut être?

Bref le code déjà présent sur votre panneau admin ...

Voilà
<marquee scrollamount="10" onmouseover="this.stop()" onmouseout="this.start()">
                                            <img src="https://i.servimg.com/u/f68/10/06/32/88/zg07-312.jpg" border="0" alt="" />0800<img src="https://i.servimg.com/u/f68/10/06/32/88/zh08_c10.jpg" border="0" alt="" />0801<img alt="" border="0" src="https://i.servimg.com/u/f68/10/06/32/88/zh08-010.png" />
</marquee>

[Neptunia]

Remplacez votre code HTML par celui-ci :

Code:

<marquee id="BerryDefilant" scrollamount="10" onmouseover="this.stop()" onmouseout="this.start()">
                                            <img src="https://i.servimg.com/u/f68/10/06/32/88/zg07-312.jpg" border="0" alt="" />0800<img src="https://i.servimg.com/u/f68/10/06/32/88/zh08_c10.jpg" border="0" alt="" />0801<img alt="" border="0" src="https://i.servimg.com/u/f68/10/06/32/88/zh08-010.png" />
</marquee>

-> On se limite à lui ajouter un identifiant.

Puis dans votre feuille de style CSS, ajoutez ceci :

Code:

#BerryDefilant img{
   max-height: 500px;
}

Enregistrer et c'est fini. Maintenant si vous ajoutez des images plus hautes que 500px elles seront automatiquement redimensionnées à 500.
Attention, les images moins hautes que 500px ne seront pas agrandies.

[le dénicheur]

Merci pour votre réponse, ça marche sur mon forum test

Serait-il possible de redimensionner  la largeur à 350 pixels ?

[Neptunia]

Oui mais si on redimensionne en largeur soit on redimensionne aussi la hauteur, soit on déforme l'image ?

S'il faut redimensionner en hauteur en même temps ça donnera ça

Code:

#BerryDefilant img{
  max-height: 500px;
  max-width: 350px;
}

-> Le code redimensionnera de façon à ce qu'aucun des maxima ne soit dépassé, mais l'une des dimensions sera variable

S'il faut que toutes les images fassent la même taille :

Code:

#BerryDefilant img{
  height: 500px;
  width: 350px;
}

-> Forcera la taille de toutes les images quitte à les déformer si elles ne sont pas initialement au ratio de 7:10

[le dénicheur]

Merci Neptunia pour votre aide 
Je vous souhaite une belle fin de journée