Images, images vectorielles, vidéos des éléments pratiquement inévitables dans vos designs.
Vue d'ensemble
Les éléments HTML <video>MDN Référence et <img>MDN Référence permettent d'intégrer ces contenus dans un document. L'élément <picture>MDN Référence quant à lui, vous permettra d'adapter une image en fonction de la dimension d'affichage. Enfin l'élément <svg>MDN Référence vous permettra d'afficher des images vectorielles décrites directement dans votre code.
Les images et les vidéos
Elles adapteront automatique leur hauteur en fonction de la largeur de l'élément conteneur.
Grâce à l'élément HTML <figure>MDN Référence et à son élément enfant <figcaption> (de type "inline-flex") vous pourrez ajouter une légende à vos médias.
Vous pouvez positionner l'élément <figcaption> à l'intérieur avec l'aide de quelques classes : figcaption--top-left, figcaption--top-center, figcaption--top-right, figcaption--center, figcaption--bottom-left, figcaption--bottom-center et figcaption--bottom-right
Affichage des différents formats de média visuel
Un coucher de soleil dans un paysage désertique
Ambiance zen
Tigre en vectoriel
Positionnement des libellés
TOP LEFTCENTERBOTTOM RIGHT
Choix du fichier image à charger en fonction des dimensions de l'affichage Redimensionnez votre navigateur, pour voir les différentes images aux différents points
d'arrêt
A noter : Il est important de trier les balises <source> de la plus grande, à la plus petite taille.
Les images vectorielles SVG
Les images vectorielles, ont l'avantage d'être très petites et peuvent être personnalisées et animées avec du css.
Comme les images, les SVG adapteront leurs taille en fonction des dimensions d'affichage.
A noter : Lors de la création de votre image SVG, il est important que votre illustration ne touche pas les bords. Il faut en effet laisser une marge de 1 ou 2px. Dans le cas contraire votre svg pourra être tronqué. C'est un bug d'affichage connu lors du redimensionnement d'un SVG "inline"
Pour utiliser un svg comme une icône, il vous suffira de spécifier la classe .icon dans votre conteneur. Vous pourrez également choisir sa couleur de fond ainsi que la couleur d'avant-plan avec les variables CSS --fill et --stroke. Par défaut la couleur des contours est celle de l'élément conteneur.
Si vous utilisez seulement quelques icônes dans votre page (max entre 10 et 12)) à plusieurs endroits. Vous pouvez les stocker directement dans votre code html dans une balise <svg> caché et non accessible.
Ensuite vous devrez englober la description du SVG avec le tag <symbol>
Pour les utiliser il vous suffira de spécifier avec le tag <use> et son attribut href l'id du svg défini.
github
github
Allez plus loin...
Pour contrôler la taille de vos medias, vous pouvez faire appel à la variable utilitaire CSS--ar. Celle-ci permet d'ajuster le ratio d'aspect. Pour vous aider à choisir Sass Swing met a disposition des variables prédéfinies :
--ratio-square: 1, --ratio-letterbox, --ratio-portrait, --ratio-wide, --ratio-ultrawide, --ratio-golden et --ratio-perfectFourth
