Width img en % compatible html5

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Titanboy, 4 Septembre 2014.

Tags:
  1. Titanboy
    Titanboy WRInaute discret
    Inscrit:
    14 Mars 2006
    Messages:
    72
    J'aime reçus:
    0
    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
     
  2. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    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...
     
  3. Titanboy
    Titanboy WRInaute discret
    Inscrit:
    14 Mars 2006
    Messages:
    72
    J'aime reçus:
    0
    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.
     
  4. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    Qu'elles sont tes erreurs ?

    On peut arranger ça ! Il ne faut pas abandonner ;)
    Ou essaye de remplacer width="100" par style="width='100px';"
     
  5. iPomme
    iPomme Nouveau WRInaute
    Inscrit:
    20 Août 2014
    Messages:
    28
    J'aime reçus:
    0
    Salut,

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

    Look sur mon site au pire, et look la source : http://www.teknikarts.com
     
  6. Titanboy
    Titanboy WRInaute discret
    Inscrit:
    14 Mars 2006
    Messages:
    72
    J'aime reçus:
    0
    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:
     
  7. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    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 ;)
     
  8. Titanboy
    Titanboy WRInaute discret
    Inscrit:
    14 Mars 2006
    Messages:
    72
    J'aime reçus:
    0
    Exactement, c'est ce que j'ai fais, mais pas précisé, merci Blount.
     
Chargement...
Similar Threads - Width compatible html5 Forum Date
max-device ou max-width ? Développement d'un site Web ou d'une appli mobile 5 Décembre 2018
Barre Full Width Développement d'un site Web ou d'une appli mobile 23 Juin 2012
Référencement d'images avec ou sans height/width ? Débuter en référencement 19 Janvier 2012
parallax et seo sont-ils compatibles ? Référencement Google 11 Juin 2020
Problème indexation page d'accueil incompatible mobile Crawl et indexation Google, sitemaps 19 Avril 2020
Google Chrome sera compatible avec les normes Better Ads AdSense 5 Juillet 2019
WebP : Compatible avec Microsoft Edge et d'autres navigateurs Google : l'entreprise, les sites web, les services 5 Octobre 2018
Gestion globale Cookies compatible CNIL ? Droit du web (juridique, fiscalité...) 30 Octobre 2017
Google Analytics est-il vraiment compatible avec les pages A/B testing ? Google Analytics 16 Septembre 2017
Quelles versions de navigateurs sont compatibles AMP ? Développement d'un site Web ou d'une appli mobile 1 Septembre 2016