Propriété CSS aspect-ratio

Propriété CSS qui permet de conserver l'espacement dans les mises en page responsives.

Una Kravets

Remarque  : Résumé : Il est essentiel de maintenir un rapport largeur/hauteur cohérent, appelé format, dans le Responsive Web Design et pour éviter le décalage cumulatif de la mise en page. Il existe désormais un moyen plus simple d'y parvenir grâce à la nouvelle propriété aspect-ratio lancée dans Chromium 88, Firefox 87 et Safari Technology Preview 118.

Format

Browser Support

• 88
• 88
• 89
• 15

Source

Le rapport d'aspect est le plus souvent exprimé sous la forme de deux nombres entiers et d'un deux-points dans les dimensions suivantes : largeur:hauteur ou x:y. Les formats les plus courants pour la photographie sont 4:3 et 3:2, tandis que les vidéos et les appareils photo grand public plus récents ont tendance à avoir un format 16:9.

Deux images avec le même format. L'une mesure 634 x 951 px, tandis que l'autre mesure 200 x 300 px. Les deux ont un format 2:3.

Avec l'avènement du design responsif, il est devenu de plus en plus important pour les développeurs Web de conserver le rapport hauteur/largeur, en particulier lorsque les dimensions des images diffèrent et que la taille des éléments change en fonction de l'espace disponible.

Voici quelques exemples où il est important de conserver le format :

• Créer des iFrames responsifs, où ils représentent 100 % de la largeur d'un parent, et où la hauteur doit rester un ratio de fenêtre d'affichage spécifique
• Création de conteneurs d'espace réservé intrinsèques pour les images, les vidéos et les éléments intégrés afin d'éviter la réorganisation lorsque les éléments se chargent et prennent de la place
• Créer un espace uniforme et réactif pour les visualisations de données interactives ou les animations SVG
• Créer un espace uniforme et réactif pour les composants à plusieurs éléments tels que les cartes ou les dates de calendrier
• Créer un espace uniforme et responsif pour plusieurs images de dimensions différentes (peut être utilisé avec object-fit)

Object-fit

Définir un format nous aide à dimensionner les éléments multimédias dans un contexte responsif. La propriété object-fit est un autre outil de ce groupe. Elle permet aux utilisateurs de décrire comment un objet (tel qu'une image) dans un bloc doit remplir ce bloc :

Présentation de différentes valeurs object-fit. Consultez la démonstration sur Codepen.

Les valeurs initial et fill réajustent l'image pour remplir l'espace. Dans notre exemple, cela entraîne un écrasement et un flou de l'image, car les pixels sont réajustés. Pas idéal. object-fit: cover utilise la plus petite dimension de l'image pour remplir l'espace et la recadre en fonction de cette dimension. Il effectue un zoom avant à sa limite inférieure. object-fit: contain garantit que l'intégralité de l'image est toujours visible. C'est donc l'opposé de cover, qui prend la taille de la limite la plus grande (dans notre exemple ci-dessus, il s'agit de la largeur) et redimensionne l'image pour conserver ses proportions intrinsèques tout en s'insérant dans l'espace. Dans le cas object-fit: none, l'image est recadrée au centre (position par défaut de l'objet) et affichée à sa taille naturelle.

object-fit: cover fonctionne généralement dans la plupart des situations pour garantir une interface uniforme et agréable lorsque vous traitez des images de dimensions variables. Toutefois, vous perdez des informations de cette manière (l'image est recadrée sur ses bords les plus longs).

Si ces détails sont importants (par exemple, lorsque vous travaillez avec une mise à plat de produits de beauté), il n'est pas acceptable de recadrer le contenu important. L'idéal serait donc d'avoir des images responsives de différentes tailles qui s'adaptent à l'espace de l'UI sans être recadrées.

L'ancienne astuce : conserver les proportions avec padding-top

Utilisation de padding-top pour définir un format 1:1 sur les images d'aperçu des posts dans un carrousel.

Pour les rendre plus responsives, nous pouvons utiliser le format. Cela nous permet de définir une taille de ratio spécifique et de baser le reste du média sur un axe individuel (hauteur ou largeur).

Une solution multi-navigateur actuellement bien acceptée pour conserver le format basé sur la largeur d'une image est appelée "Padding-Top Hack". Cette solution nécessite un conteneur parent et un conteneur enfant positionné de manière absolue. Il faut ensuite calculer le format sous forme de pourcentage pour le définir comme padding-top. Exemple :

• Format 1:1 = 1 / 1 = 1 = padding-top: 100%
• Format 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Format 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Format 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Maintenant que nous avons identifié la valeur du format, nous pouvons l'appliquer à notre conteneur parent. Prenons l'exemple suivant :

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Nous pourrions ensuite écrire le CSS suivant :

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Conserver les proportions avec aspect-ratio

Utilisation de aspect-ratio pour définir un format 1:1 sur les images d'aperçu des posts dans un carrousel.

Malheureusement, le calcul de ces valeurs padding-top n'est pas très intuitif et nécessite une surcharge et un positionnement supplémentaires. Avec la nouvelle propriété CSS intrinsèque aspect-ratio, le langage pour conserver les formats est beaucoup plus clair.

Avec le même balisage, nous pouvons remplacer padding-top: 56.25% par aspect-ratio: 16 / 9, en définissant aspect-ratio sur un ratio spécifié de width / height.

Utiliser padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

Utiliser le format

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

L'utilisation de aspect-ratio au lieu de padding-top est beaucoup plus claire et ne modifie pas la propriété de marge intérieure pour effectuer une action en dehors de son champ d'application habituel.

Cette nouvelle propriété permet également de définir le format sur auto, où "les éléments remplacés avec un format intrinsèque utilisent ce format ; sinon, la boîte n'a pas de format préféré". Si auto et <ratio> sont spécifiés ensemble, le format préféré est le rapport spécifié de width divisé par height, sauf s'il s'agit d'un élément remplacé avec un format intrinsèque, auquel cas ce format est utilisé à la place.

Exemple : cohérence dans une grille

Cela fonctionne très bien avec les mécanismes de mise en page CSS tels que CSS Grid et Flexbox. Prenons l'exemple d'une liste avec des enfants pour lesquels vous souhaitez conserver un format 1:1, comme une grille d'icônes de sponsors :

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Images dans une grille avec leur élément parent à différentes dimensions de format. Voir la démo sur CodePen

Exemple : éviter un décalage de mise en page

aspect-ratio présente également l'avantage de pouvoir créer un espace réservé pour éviter le décalage de mise en page cumulatif et améliorer les métriques Web Vitals. Dans ce premier exemple, le chargement d'un élément à partir d'une API telle qu'Unsplash crée un décalage de mise en page lorsque le contenu multimédia a fini de se charger.

Vidéo du décalage de mise en page cumulé qui se produit lorsqu'aucun format n'est défini sur un composant chargé. Cette vidéo est enregistrée avec un réseau 3G émulé.

En revanche, l'utilisation de aspect-ratio crée un espace réservé pour éviter ce décalage de mise en page :

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Une vidéo avec un format défini est définie sur un composant chargé. Cette vidéo est enregistrée avec un réseau 3G émulé. Voir la démo sur CodePen

Conseil bonus : attributs d'image pour le format

Vous pouvez également définir le format d'une image à l'aide des attributs image. Si vous connaissez les dimensions de l'image à l'avance, il est conseillé de définir ces dimensions comme width et height.

Dans l'exemple ci-dessus, sachant que les dimensions sont de 800 x 600 pixels, le balisage de l'image se présente comme suit : <img src="image.jpg" alt="..." width="800" height="600">. Si l'image envoyée a le même format, mais pas nécessairement les mêmes valeurs exactes en pixels, nous pouvons toujours utiliser les valeurs des attributs d'image pour définir le format, combinées à un style de width: 100% afin que l'image occupe l'espace approprié. En regroupant tout, cela devrait se présenter comme suit :

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Au final, l'effet est le même que si vous définissiez aspect-ratio sur l'image via CSS, et le décalage de mise en page cumulatif est évité (voir la démo sur Codepen).

Conclusion

Grâce à la nouvelle propriété CSS aspect-ratio, disponible dans plusieurs navigateurs modernes, il est un peu plus facile de conserver des proportions correctes dans vos conteneurs de mise en page et de contenu multimédia.

Photos d'Amy Shamblen et Lionel Gustave sur Unsplash.