Discussion :

[Invité]

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

[headmax]

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

[Invité]

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.

[headmax]

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

[Invité]

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