Width img en % compatible html5

WRInaute discret
Salut les amis!

Quand je charge mon site, il y'a une micro seconde ou les elements img ne sont pas bien placés, avant que les images se chargent complètement notamment.

Je viens de me rendre compte que pour éviter ce désagrément, il suffit d'attribuer les balises width="xxx" et height="xxx" .

En html5, il faut declarer ces tailles en pixel (sans px a la fin) comme ceci: width="100"

Le hic c'est que mon site s'adapte a la taille de l'écran des visiteurs, donc mon image ne peut pas être déclarée en width fix, mais seulement en %age, ce que je fais dans mon code css.

Savez vous comment les déclarer dans ces balises img?

Thanks
Julien
 
WRInaute occasionnel
Hello,

Tu as essayé de mettre tout de même la taille réel width="100" ?
Car justement, pourquoi tricher et ce compliquer la vie ^^

Ce qui compte, c'est le style après, la surcouche max-width qui va faire le travail, dans un deuxième temps ;)

Ensuite, si tes images sont vraiment lourde... pourquoi ne pas les compresser un peu ? a 70-80% par ex...
 
WRInaute discret
Bongo! Merci Romu.

Cependant, finalement, quand je test mon code avec w3c, ca déclare des erreur html5. Va comprendre.

Je laisse sans rien du coup. Advienne que pourra.
 
WRInaute occasionnel
Qu'elles sont tes erreurs ?

On peut arranger ça ! Il ne faut pas abandonner ;)
Ou essaye de remplacer width="100" par style="width='100px';"
 
WRInaute discret
Merci iPomme, Merci Romu.

Et essayant de vous répondre ici, je me suis apercu que je suis un ane, j'ai ajouté dans mes image
Code:
 width="100" height="50"
et ensuite je gère les tailles réelles dans mon CSS et ca fonctionne dans html5. Tout a l'heure ca ne marchait pas parcque j'essayais de mettre
Code:
 width="100" height="auto"

Désolé pour le dérangement...
Je sors :arrow:

:mrgreen:
 
WRInaute impliqué
Si tu définit tes tailles via les attributs width et height et qu'en CSS tu as un max-width à 100% par exemple, tu vas avoir une déformation lorsque l'image va réduire.
Il faut donc penser au "height: auto" en CSS afin de passer outre l'attribut height.

Je pense que tu y a pensé, mais ça pourra aider d'autre personne qui découvre ce sujet ;)
 
Discussions similaires
Haut