Width img en % compatible html5

[Titanboy]

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

 

[-Romu-]

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...

 

[Titanboy]

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.

 

[-Romu-]

Qu'elles sont tes erreurs ?

On peut arranger ça ! Il ne faut pas abandonner
Ou essaye de remplacer width="100" par style="width='100px';"

 

[iPomme]

Salut,

Explique un peu plus ton problème, on va régler ça !

Look sur mon site au pire, et look la source : http://www.teknikarts.com

 

[Titanboy]

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

 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

 width="100" height="auto"

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

:mrgreen:

 

[Blount]

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

 

[Titanboy]

Exactement, c'est ce que j'ai fais, mais pas précisé, merci Blount.