Aspect-ratio - Propriété CSS

aspect-ratio

Résumé des caractéristiques de la propriété aspect-ratio

Description rapide
Définit le ratio entre la largeur et la hauteur de l'élément.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété aspect-ratio passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Dimensionnement des blocs
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de aspect-ratio.

aspect-ratio - Syntax DiagramSyntax diagram of the aspect-ratio CSS property. See stylescss.free.fr for details. auto auto number / number number / numberaspect-ratio:;aspect-ratio:;
Schéma syntaxique de la propriété aspect-ratio
Détail de la syntaxe

Légende :

  • number sont deux nombres positifs sans unité.

Description de la propriété aspect-ratio.

aspect-ratio définit le ratio entre la largeur de l'élément et sa hauteur.

Certains éléments contenant par exemple une image ont déjà un ratio prédéfini. Dans ce cas, CSS tente toujours de conserver ce ratio initial lors du dimensionnement de l'élément, sauf si une largeur et une hauteur sont explicitement demandées en ne respectant pas ce ratio.

La propriété aspect-ratio est utile sur les éléments qui n'ont pas de ratio prédéfini, comme les blocs de texte par exemple.

Syntaxes pour aspect-ratio.

  • aspect-ratio: auto;

    Le navigateur utilise le ratio prédéfini de l'élément, si ce dernier en a un. Dans le cas contraire aucun ratio n'est imposé sur les dimensions de l'élément.

  • aspect-ratio: 2 / 1;

    CSS tentera de conserver une largeur de l'élément qui soit deux fois plus grande que sa hauteur, tant que d'autres propriétés comme height ou width ne sont pas forcées à des valeurs contradictoires. L'une de ces deux propriétés doit cependant être définie pour que aspect-ratio soit opérationnelle.

Valeurs communes à toutes les propriétés :

aspect-ratio: initial (auto) aspect-ratio: inherit aspect-ratio: revert aspect-ratio: revertLayer aspect-ratio: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Manipulation de la propriété aspect-ratio par programme.

Avec Javascript, lire la valeur de aspect-ratio.

En Javascript, voici comment modifier la valeur de aspect-ratio. Deux syntaxes sont possibles, avec le nom de la propriété écrit en kebab-case (typique de CSS), et la deuxième avec le nom de la propriété en camel-case (plus courante en Javascript).

Javascript
let el = document.getElementById('id'); let value = el.style['aspect-ratio']; // ou let el = document.getElementById('id'); let value = el.style.aspectRatio;

Avec Javascript, modifier la valeur de aspect-ratio.

Ce code récupère la valeur de l'attribut style du HTML. Autrement dit, la propriété doit avoir été initialisée directement sur l'élément lui-même et non pas en passant par un sélecteur CSS.

Javascript
let el = document.getElementById('id'); let value = el.style['aspect-ratio']; // ou let el = document.getElementById('id'); let value = el.style.aspectRatio;

Avec Javascript, lire la valeur calculée de aspect-ratio.

La valeur calculée est celle qui résulte soit de l'application directe d'une valeur via un sélecteur CSS, ou celle qui résulte d'un héritage.

Dans le cas de aspect-ratio, le ratio est retourné sous la forme d'une fraction. S'il a été défini par un nombre décimal (0.5 par exemple), il sera renvoyé sous la forme 0.5/1.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('aspect-ratio');

Avec JQuery, modifier la valeur de aspect-ratio.

JQuery

$('#id').css('aspect-ratio', '2');
// ou
$('#id').css('aspectRatio', '2');

Avec JQuery, lire la valeur calculée de aspect-ratio.

La lecture de la propriété peut se faire avec les codes suivants. Comme en Javascript, le ratio est renvoyé sous une forme fractionnaire, quitte à ce que le dénominateur soit 1.

JQuery
let value = $('#id').css('aspect-ratio');

Testez vous-même.

La valeur affectée et la valeur calculée sont affichables avec les boutons ci-dessous.

Animation avec aspect-ratio.

Une petite animation amusante réalisée simplement en faisant varier la valeur de aspect-ratio de chacune de ces images. L'aspect saccadé est dû à l'utilisation de la fonction steps() (ce n'est pas votre ordinateur qui rame).
Pour éviter de décaler toute la suite de la page, la hauteur du conteneur a été fixée, ainsi que la hauteur de ligne.

Animation d'une image avec aspect-ratio (1) Animation d'une image avec aspect-ratio (2) Animation d'une image avec aspect-ratio (3)

Exemple interactif avec la propriété aspect-ratio.

L'image utilisée par le simulateur à une largeur de 300 pixels et une hauteur de 150 pixels, ce qui correspond donc à un ratio intrinsèque de 2/1. Sur la première image, la largeur a été définie par la propriété width à 300 pixels et la hauteur n'est pas définie. A contrario, sur la deuxième image, c'est la hauteur qui est définie (à 150 pixels) et la largeur qui n'est pas définie.

aspect-ratio :
Démonstration pour aspect-ratio Démonstration pour aspect-ratio

Prise en charge par les navigateurs (compatibilité).

La propriété aspect-ratio commence à être bien reconnue par les navigateurs.

Colonne 1
Prise en charge de la propriété aspect-ratio pour donner une préférence largeur/hauteur dans la dimension des éléments.
1
Propriété
aspect-ratio
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Historique de la propriété aspect-ratio.

Voir aussi, concernant le dimensionnement des blocs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété aspect-ratio fait partie du module "Module CSS - Dimensionnement des blocs" (CSS Box Sizing Module).
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

block-size
Définit la dimension d'un l'élément suivant la direction des blocs.
box-sizing
Définit le mode de calcul des dimensions de blocs : en incluant ou non les bordures et les marges intérieures.
contain-intrinsic-block-size
Définit la dimension de l'élément dans la direction des blocs, lorsque l'élément est confiné.
contain-intrinsic-height
Définit la hauteur intrinsèque de l'élément lorsque celui-ci est confiné.
contain-intrinsic-inline-size
Définit la dimension de l'élément dans la direction des lignes, lorsque l'élément est confiné.
contain-intrinsic-size
Définit les dimensions de l'élément (blocs et lignes) lorsque l'élément est confiné.
contain-intrinsic-width
Définit la largeur intrinsèque de l'élément lorsque celui-ci est confiné.
height
Définit la hauteur de l'élément.
inline-size
Définit la dimension de l'élément dans la direction des lignes.
max-height
Définit une limite à la hauteur maximale de l'élément.
max-width
Définit la largeur maximale de l'élément.
min-height
Définit la hauteur minimale de l'élément.
min-width
Définit la largeur minimale de l'élément.
width
Définit la largeur de l'élément.

Fonctions :

fit-content()
Calcule une dimension en fonction du contenu et de limites.

Valeurs:

fit-content
Calcule la dimension d'un élément en fonction de son contenu et de la place disponible.
max-content
Donne la dimension d'un texte sans insérer de retours à la ligne.
min-content
Donne la dimension d'un texte après avoir inséré le plus possible de retours à la ligne.