Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f
To Recap
1) Use background-image if your image is not part of the page’s content.
2) Use object-fit if you don’t care about IE.
3) The padded container technique, used by Netflix, works everywhere.
4) In most cases, just add height: auto; in your CSS.
5) If you need fast load times, use srcset to load smaller images on mobile.
Le #plugin #SPIP « Image responsive » d’@arno utilise la méthode Netflix si je ne m’abuse.
A peu de chose près : les images ne sont pas en absolute, c’est le contenant <picture> qui a une hauteur à 0
►https://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive
J’ai ajouté un gros paragraphe consacré à « Image adaptative, recadrage et direction artistique » dans ma documentation du #plugin #SPIP image_responsive :
►http://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive
Ça explique les critères de recadrage que l’on peut utiliser directement dans le filtre image_responsive, comme ceci :
[(#LOGO_ARTICLE_NORMAL|image_responsive{
0/480/800/1280/1920/480/800/1280/1920,
0, 0,
(max-width: 480px) and (orientation:portrait)/(min-width:481px) and (max-width: 800px) and (orientation:portrait)/(min-width:801px) and (max-width:1280px) and (orientation:portrait)/(min-width:1281px) and (orientation:portrait)/
(max-width: 480px)/(min-width:481px) and (max-width: 800px)/(min-width:801px) and (max-width:1280px)/,
4x5/4x5/4x5/4x5/3x2/3x2/3x2/3x2
})]picture en HTML5, extrêmement efficace au niveau de l’affichage, puisque l’image est préchargée, et l’affichage est instantané quand on revient sur une page déjà affichée).Pour le plugin lui-même :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive