28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Normalement le hover ne me pose pas de problème, mais ici j'avoue que je suis perdue Smiley biggol .
Je suis confrontée à deux problèmes qui sont liés d'ailleurs :

1. J'ai des images [u]de tailles différentes[/u] qui sont uploadées par des utilisateurs X sur le serveur. Elles sont ensuite affichées au format miniature, mais mais une taille identique (width: 30px; height: 30px). Au survol, chaque image doit apparaître sous une taille en respectant la proportionnalité de la taille initiale. Je m'explique :
- image initiale uploadée par un utilisateur1 : width : 500px; height: 800px;
- image initiale uploadée par un utilisateur2 : width : 200px; height: 400px;
- image initiale uploadée par un utilisateur3 : width : 700px; height: 500px;
On peut voir que les width et height varient.
J'aimerais au survol :
- respecter la proportionnalité initiale
- ne pas dépasser un width et height max pour que cela reste lisible pour une image:hover.
Une idée ?

2. D'autre part, pour faire le hoover d'une image stockée sur le serveur dans ma page html, je ne vois pas trop car je ne connais pas le nom du fichier puisqu'il varie. Voici la div :
<div class="imgGlyph">
							<img src="img/glyph/<?php echo $rowgl['add_img'];?>">
            </div>

Comment exprimer un background-url dans mon css pour une image gérée en php ?

D'avance, je vous remercie.

McCallum
Bonsoir,

Pour la première question, je passerais par un script php (il en existe des prêts à l'emploi mais je n'en ai pas en tête car j'utilise WordPress qui fait très bien ce genre de chose) pour recouper toutes les images uploadée en 30px X 30px. Au survol de la miniature l'image originale serait appelée en ajax...

a écrit :
Comment exprimer un background-url dans mon css pour une image gérée en php ?

Via du style en ligne, avec le même code php que pour l'attribut source de l'image :
<style>
.imgGlyph {
    background-image: url("img/glyph/<?php echo $rowgl['add_img'];?>");
}
</style>

Modifié par Olivier C (12 Nov 2015 - 21:47)
Merci Oliver C Smiley biggrin ! Je ne savais pas que dans un css on pouvait mettre du PHP.

Je vais essayer de trouver un script php pour recouper la taille des images. Je ne mets pas encore résolu...

McCallum
Modifié par McCallum (12 Nov 2015 - 22:58)
McCallum a écrit :
Merci Oliver C Smiley biggrin ! Je ne savais pas que dans un css on pouvait mettre du PHP.

Oui mais, comme je le disais, seulement dans une page dynamique via du style en ligne, pas dans une feuille de style.

Bon courage pour la suite.