[Résolu] Picture ou image responsive? je ne m'en sors pas...

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

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 !

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 !