IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Image srcset non prise en compte


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Image srcset non prise en compte
    Bonjour,

    Je souhaite utiliser la fonction srcset pour dimensionner mes images suivant l'écran de l'utilisateur.

    J'ai une image sous 2 formats:
    Test550.png ---550x800 px
    Test320.png ---320x450 px

    Mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    			<div >
    				 <p><img src="images/Test550.png" srcset="images/Test320.png 320w" alt="" /></a></p>
    			</div>
    Lorsque je fait un test (avec FFQuantum), l'affichage sur un écran en 320px est ok, mais sur un écran en 1024 l'image qui s'affiche n'est pas Test550 en 550x800 mais une image agrandie qui occupe tout le viewport.
    Ce que je souhaite obtenir c'est que si l'écran est supérieur à 320 l'image 550 s'affiche sans déformation.
    Merci
    Dernière modification par Invité ; 30/11/2017 à 19h23.

  2. #2
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    Il faut mettre dans ton srcset tout les différentes déclinaison des images de la plus grande vers la plus petite de cette façon : <img srcset="image1.png size, image2.png size ..."/>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_1400.jpg 1400w,
                   https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_700.jpg 700w,
                   https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_400.jpg 400w"
           sizes="(min-width: 700px) 700px, 100vw"
           alt="Belle maison de campagne">
    démo:
    https://codepen.io/headmax/pen/WXLNpR

  3. #3
    Invité
    Invité(e)
    Par défaut
    La doc dit que si la résolution de l'écran n'est pas définie parmi les srcset alors se sera l'image définie au niveau du src qui sera affichée.
    Car si il faut définir toutes les résolutions possibles pour être sur de son design c'est inapplicable et ingérable.

  4. #4
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    Oui tu as résolu ton soucis . j'ai précisé "size" et j'ai mit aussi dans la la balise "img" une "min-width" qui faudra bien entendu adapté.

  5. #5
    Invité
    Invité(e)
    Par défaut
    Le problème reste entier car dans size 100vw indique que l'image choisie devra occuper toute la largeur du viewport, donc redimensionnement…

    Mais j'ai trouvé une solution sans vraiment comprendre le problème en redéfinissant mon image de base dans la liste des srcset avec une grande résolution :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
                            <div >
    				 <p><img src="images/Test550.png" srcset="images/Test550.png 1920w, images/Test320.png 320w" alt="" /></p>
    			</div>
    Merci pour votre aide
    Dernière modification par Invité ; 30/11/2017 à 19h21.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [2.x] Suppression d'une image non prise en compte
    Par pixel016 dans le forum Symfony
    Réponses: 19
    Dernier message: 20/01/2015, 09h30
  2. CSS image non prise en compte
    Par lodan dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 31/10/2006, 08h49
  3. Lecture de fichier - dernière ligne non prise en compte
    Par JulienPles dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 16/03/2005, 11h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo