1177 sujets

Web Mobile et responsive web design

Bonjour tout le mode !

Je suis en train de travailler sur un nouveau template pour un site (pour ma station meteo).
J'utilise un logiciel (weewx), que je peux parametrer pour generer des graphiques en png (par exemple un graphique de la temperature sur la journée).
Les dimensions du png et les tailles des textes sont paramétrables, je voulais en profiter pour jouer un peu avec le "responsive design".
En gros: afficher une petite image sur mon téléphone, une moyenne sur ma tablette et une grande sur PC (voire, cerise sur le gateau, une image HD (2x largeur et hauteur de la petite) pour le retina.).
Pour mettre quelques chiffres, pour l'instant je génère des graphiques:
480x200 => pour afficher sur téléphone avec écran < 480px
840x300 => pour tablette <840px
1280x400 => pour PC.

Je voudrais afficher les images à 100% de largeur écran jusqu'à arriver à leur largeur maxi.
C'est à dire l'image 1280 s'adapte à la largeur d'écran si l'écran est < 1280 mais ne dépasse pas 1280 sur écran plus grand.


J'ai lu quelques pages sur l'utilisation de srcset (inclus sur alsacreation) ou de la balise picture pour utiliser des images "responsive", mais je ne m'en sors pas...


1er test:
<img alt="" class="image fit" src="dayrain840.png"
                             srcset="dayrain480.png 480w,
                                     dayrain840.png 840w,
                                     dayrain1280.png 1280w"
                             sizes="(max-width: 1280px) 100vw , (min-width: 1280px) 1280px"><br>


Fonctionne plutôt pas mal sur PC, mais sur mon mobile (chrome), j'ai toujours l'image 1280 (reduite pour rentrer dans l'écran)
Mon mobile a une largeur d'écran de 1080 et la résolution "web" est de 360 (d'après les sites "what is my resolution").

2eme test:

img alt="" src="daytempdewchill840.png" width="840" height="300"
                             srcset="daytempdewchill480.png 480w,
                                     daytempdewchill840.png 840w,
                                     daytempdewchill1280.png 1280w"
                             sizes="(max-width: 839px) 480px,
                                    ((min-width: 840px) and  (max-width: 1279px)) 840px,
                                    (min-width: 1280px) 1280px"><br>


là c'est le pompom.
Sur mobile: j'ai l'image 1280, mais non redimensionnée, je vois juste un tiers environ.
Sur PC: en plein écran (1920), c'est l'image 1280 qui s'affiche mais semble réduite (à 840 je dirais).
Si je réduis la fenetre, quand je descend en dessous de 840, c'est l'image 480 qui s'affiche ! mais étirée pour rentrer dans l'affichage.


3eme test:

<picture>
        <source media="(min-width: 840px)" srcset="daytempdewchill1280.png" sizes="(max-width: 1280) 100vw">
        <source media="(max-width: 480px)"  srcset="daytempdewchill480.png" sizes="(max-width: 480) 100vw">
        <source media="(max-width: 840px)"  srcset="daytempdewchill840.png" sizes="(max-width: 840) 100vw">
        <img src="daytempdewchill840.png"
                title="Image par défaut">
</picture><br/>



Là c'est mieux !
J'ai bien l'image 480 quand je suis en dessous de 480, l'image 840 entre 480 et 840 puis l'image 1280, que ce soit sur PC ou sur portable.
Par contre, les images s'affiche à leur taille nominale alors que je voudrais qu'elles se resize à 100% de l'écran.
C'est à dire que sur mon tel en portrait, l'image 480 s'affiche, mais sur une résolution de 360, il me manque 1/4 à droite.


* Question subsidaire: comment on applique du css à <picture> pour centrer l'image par exemple ou jouer sur les paddings ?




J'espère ne pas avoir été trop fouilli Smiley biggrin
Bon finalement je crois que j'ai trouvé!


<picture style="text-align:center">
        <source srcset="daytempdewchill480.png   480w" media="(max-width:  480px)"  sizes="100vw">
        <source srcset="daytempdewchill840.png   840w" media="(max-width:  840px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png 1280w" media="(max-width: 1280px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png 1280w" media="(min-width: 1281px)"  sizes="1280px">
        <img src="daytempdewchill840.png" title="Image par défaut">
</picture>


j'ai ajouté la taille dans srcset (480w etc..) et remanié un peu les conditions.
Bonsoir !

L'exemple marche super bien sur mon téléphone !
Je suis en vacances un peu loin de mon pc mais je regarde ca de près semaine prochaine !
Justement le retina me résistait, merci pour les liens !
Smiley smile
J'expérimente picture depuis quelque temps maintenant, mais je n'ai pris en compte l'aspect retina que très récement (environ deux semaines, votre topic tombait donc à point) afin de tirer partit de la qualité des mes images en très haute résolution. Je suis allé voir les dernières recomandations Google et c'est ainsi que j'ai remplacé mes "400w", etc, par des "2x", "4x"...
Bonjour!
J'ai tenté de transposer le code à ma situation pour tester ( j'edite depuis mon smartphone, pas facile Smiley smile ).

Ca ne fonctionne pas bien sur le smartphone, j'ai bien l'image "HD" qui s'affiche mais elle dépasse de l'écran.
C'est difficile à mesurer, mais on dirait qu'elle est bien réduite par 2 (effet retina) mais affichée à sa pleine largeur (480 pixel) au lieu de 100vw.

Mon navigateur smartphone a, a priori, une résolution de 360pixel, en gros je perds une bande à droite qui semble faire environ 1/4 de l'image.

Je ne peux pas tester sur pc pour le moment.
L'image HD fait 960pixel (2x480)



<picture style="text-align:center">
        <source srcset="daytempdewchill480.png, daytempdewchillHD.png 2x" media="(min-width:  300px)"  sizes="100vw">
        <source srcset="daytempdewchill840.png" media="(min-width:  480px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png" media="(min-width: 840px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png" media="(min-width: 1281px)"  sizes="1280px">

        <img src="daytempdewchill840.png" title="Image par défaut">

</picture><br/>


Voici un screenshot.

L'image du haut correspondant au code de mon dernier post (image HD tronquée)

La 2ème image correspond à mon code précédent (image 480pixel, affichée correctement à 100% de la largeur d'écran)
Disposez les sources selon les min-width en valeurs décroissantes pour voir, comme pour mon exemple. Idem pour les valeurs Retina à min-width égaux.

Je ne sais plus trop où j'avais péché l'info mais il me semble que l'ordre a son importance, au moins pour certains navigateurs : ces derniers piochent la première source qui correspond à leur critère, et s'en tiennent là sans chercher plus avant.
Modifié par Olivier C (21 Jul 2017 - 23:24)
Bonsoir!

Bingo, j'ai trouvé!

J'ai commencé par faire un copier coller du code source d'une <picture> de votre site (Beatus de Silos), simplement en remplacant vos liens par mes images.
Ca me donnait le même résultat qu'avec mon code.

J'ai alors pensé à autre chose: j'ai lu sur un site ou un forum que les paramètres de la balise "<img>" s'applique à toutes les sources définie.

En fait plus précisément (et c'est pas intuitif): ce qui s'affiche à l'écran c'est la balise <img>.
la section <picture> 'parente' ne fait que 'fournir' des images alternatives à celle de la balide <img> (suivant les conditions définit dans media etc...).

bref, il m'a suffit d'ajouter quelques régles CSS à la partie <img> pour que ca fonctionne parfaitement !!!


En résumé ca donne ca:
<picture style="text-align:center">
        <source srcset="daytempdewchill1280.png" media="(min-width: 1281px)"  sizes="1280px"/>
        <source srcset="daytempdewchill1280.png" media="(min-width: 840px)"  sizes="100vw"/>
        <source srcset="daytempdewchill840.png" media="(min-width:  480px)"  sizes="(max-width:480px) 360px, 100vw"/>
        <source srcset="daytempdewchill480.png, daytempdewchillHD.png 2x" media="(min-width:  300px)"  sizes="100vw"/>

        <img class="image fit" src="daytempdewchill840.png" title="Image par défaut" sizes="100vw"/>

</picture><br/>

(mais on peut modifier les règles 'media' etc sans soucis).


Le petit détail qui a fait fonctionner comme je le voulais c'est le img class="image fit"
surtout le max-with 100% (qui me semble doublons avec le sizes 100vw mais apparemment ca fait la différence.

.image.fit {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
}



Je vais quand même continuer mes tests, j'ai encore du pain sur la planche.

Merci pour votre aide en tout cas !
Bonjour,

Après quelques check et correction, voici le code qui passe la validation w3c:

<picture>
        <source srcset="daytempdewchill1280.png 1280w" media="(min-width: 1281px)" sizes="1280px">
        <source srcset="daytempdewchill1280.png 1280w" media="(min-width: 593px)" sizes="100vw">
        <source srcset="daytempdewchill592.png, daytempdewchill592HD.png 2x" media="(min-width:  361px)">
        <source srcset="daytempdewchill360.png, daytempdewchill360HD.png 2x" media="(max-width:  360px)">
        <img class="image fit" src="daytempdewchill840.png" title="graphine temperature" sizes="100vw" alt="graphique temperature"> 
</picture>
Trululu a écrit :
En fait plus précisément (et c'est pas intuitif): ce qui s'affiche à l'écran c'est la balise <img>. La section <picture> 'parente' ne fait que 'fournir' des images alternatives à celle de la balide <img> (suivant les conditions définit dans media etc...).

Tout a fait, la balise picture ne se style pas, c'était précisé dans un commentaire du CodePen que je vous ai donné en lien mais vous pouviez passer à côté. J'aurais dû vous le redire ici-même car, effectivement, ce n'est pas une évidence et j'étais tombé dans le panneau moi aussi avant d'aller voir les spécifications de cette balise.
Modifié par Olivier C (24 Jul 2017 - 15:09)