Ajustements et masques CSS

Depuis le début de nos travaux autour de la composition des pages HTML/CSS, nous avons découvert qu’il existant 2 types d’images. Les images informatives, celles que nous mettons directement dans le code HTML, et les images décoratives, appelées dans la feuille de style CSS. Nous savons que les moteurs de recherche s’appuient sur certains attributs (alt et title) pour référencer une image et facilité son accès par l’internaute. De ce fait, une image décorative ne pourra être indexée par ces derniers. Mais comment gérer l’aspect graphique d’une image lorsque celle ci doit être intégrée à l’intérieur d’un masque ou s’adapter un un container sans dépasser certaines dimensions ? En CSS, aucun soucis, il nous suffit de jouer avec la forme du container et attribuer une valeur background-size. Mais est-il possible de manipuler une image HTML de la même façon ? C’est ce que nous allons découvrir dans cet article…

Object-fit, la variable d’ajustement

La propriété d’ajustement de taille CSS object-fit permet de spécifier la manière s’ajuste la taille d’un élément dit remplacé à l’intérieur de sa boite dont les dimensions sont définies par les propriétés Css width et height.

Concrètement, à quoi va nous servir cette propriété ?

Cette nouvelle propriété a comme gros avantage de pouvoir contraindre l’affichage d’une image à des dimensions données par le CSS et non par ses dimensions réelles. Par exemple, une image de 800px de large par 600px de haut devra loger dans un container carré de 400px / 400px en le recouvrant totalement. Nous procéderons comme suit :

img{
  width : 400px;
  heignt : 400px;
  overflow : hidden;
  object-fit : cover;
}

Si, nous choisissons de donner la valeur contain à la propriété object-fit, le résultat obtenu permettra de contraindre l’image à la valeur donnée en css (height:400; width:400px) mais cette fois-ci sans la recadrer :

img{
  width : 400px;
  heignt : 400px;
  overflow : hidden;
  object-fit : contain;
}

Les valeurs possibles à la propriété object-fit

La propriété de feuille de style object-fit CSS peut prendre la valeur d’ajustement de taille :

• none : aucun ajustement de la taille.
• fill : l’élément est étiré pour remplir toutes la zone de contenu de son conteneur, l’élément ne garde pas son rapport hauteur / largeur. Valeur par défaut.
• cover : l’élément est dimensionné pour remplir toute la zone de contenu de son conteneur tout en gardant son rapport hauteur /largeur. Si l’élément est plus grand que la zone de contenu il sera rogné.
• contain : l’élément est dimensionné pour être contenu dans la zone de contenu de son conteneur tout en gardant son rapport hauteur /largeur.
• scale-down : l’élément est dimensionné comme si none ou contain étaient spécifiés, la dimension la plus petite est appliquée.
• inherit : hérite de la propriété CSS object-fit de son parent.

Propriété associée : object-position

Une fois que nous avons défini la propriété de rendu d’ajustement, il nous est possible de définir le positionnement de l’aperçu à l’intérieur de son container à l’aide de la propriété object-position.

La propriété de feuille de style object-position CSS peut prendre une ou deux valeurs de position :

• numérique numérique : première valeur correspond à sa position sur l’axe X et la seconde correspond à sa position sur l’axe Y. X et Y sont suivis d’une unité de longueur CSS hors % et utilise comme point d’origine le coin haut gauche de la zone d’arrière-plan. Si une seule valeur, cela revient à mettre en Y 50%.
• pourcentageX pourcentageY : identique au numérique, à la différence du positionnement.
  Le point pourcentageX de l’élément remplacé doit être placés au point pourcentageX de la surface de l’élément.
  Le point pourcentageY de l’élément remplacé doit être placés au point pourcentageY de la surface de l’élément.
• top left ou left top : revient à positionner l’élément remplacé en ‘0% 0%‘. Valeur par défaut.
• top : positionne l’élément remplacé en ‘50% 0%‘.
• top center ou center top : positionne l’élément remplacé en ‘50% 0%‘.
• right top ou top right : positionne l’élément remplacé en ‘100% 0%‘.
• left : positionne l’élément remplacé en ‘0% 50%‘.
• left center ou center left : positionne l’élément remplacé en ‘0% 50%‘.
• center ou center center : positionne l’élément remplacé en ‘50% 50%‘.
• right : positionne l’élément remplacé en’100% 50%‘.
• right center, ou center right : positionne l’élément remplacé en ‘100% 50%‘.
• bottom left ou left bottom : positionne l’élément remplacé en ‘0% 100%‘.
• bottom : positionne l’élément remplacé en ‘50% 100%‘.
• bottom center, ou center bottom : positionne l’élément remplacé en ‘50% 100%‘.
• bottom right ou right bottom : positionne l’élément remplacé en ‘100% 100%‘.
• inherit : l’élément remplacé hérite de la valeur du object-position de son parent.

Les masques et découpages CSS

Historiquement, les images HTML ne peuvent êtres affichées que sous la forme d’un rectangle ou d’un carré. Le masquage ou clipping consiste à créer un découpage de notre visuel à la façon d’un masque d’écrêtage comme nous le ferions dans Illustrator. De cette façon, nous pourrons afficher une portion ciselée d’une image légère et pourquoi pas animer ce découpage.

La propriété clip-path peut être appliquée à n’importe quel élément HTML soit en utilisant un chemin défini avec une URL qui fait référence à un SVG externe ou en ligne, soit à l’aide de formes géométriques introduites avec les formes CSS.

On peut définir la propriété clip-path avec une ou plusieurs des valeurs suivantes :

• un chemin URL qui nous permettra de charger un code svg (image vectorielle simple) destinée à servir de matrice pour notre masque.
• Une suite de coordonnées CSS.

Chemin URL et SVG

Pour effectuer cette manipulation il nous faudra au préalable créer notre forme SVG soit en la codant directement dans un éditeur, soit en la générant à l’aide d’un logiciel d’illustration vectorielle (ex : Adobe Illustrator).

Une fois cette forme définie, nous pourrons l’appeler et l’appliquer à notre élément HTML en le ciblant simplement en CSS.

Le code SVG :

<svg width=0 height=0>
  <defs>
   <clipPath id="decoupage">
     <circle cx="210" cy="105" r="105" />
   </clipPath>
 </defs>
</svg>

Le code CSS :

img {
  clip-path: url(#decoupage);
}

La solution pure CSS

Dans cette seconde approche, la forme à appliquer sera directement définie par le code CSS, chaque point sera donné à l’aide de coordonnées numériques horizontaux (abscisse / x) et verticaux (ordonné / y) données pour un type de forme (ici un polygone) :

img{
  clip-path: polygon(
    0px 280px,
    421px 279px,
    421px 203px,
    378px 198px,
    352px 216px,
    322px 203px,
    304px 211px,
    229px 194px,
    171px 209px,
    113px 207px,
    79px 222px,
    0px 213px)
}
 

Pour conclure

Le choix de la méthode de traitement de l’image est donc quelque chose à maitriser pour optimiser au mieux le poids de nos pages, leur référencement et leur comportement lors du redimensionnement sans pour autant perdre en créativité.