Aspect-ratio - Propriété CSS
Résumé des caractéristiques de la propriété aspect-ratio
auto
auto
aspect-ratio
passe progressivement d'une valeur à une autre.Schéma syntaxique de aspect-ratio
.
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
ouwidth
ne sont pas forcées à des valeurs contradictoires. L'une de ces deux propriétés doit cependant être définie pour queaspect-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).

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.

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
.

let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('aspect-ratio');
Avec JQuery, modifier la valeur de aspect-ratio
.

$('#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
.

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.



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.


Prise en charge par les navigateurs (compatibilité).
La propriété aspect-ratio
commence à être bien reconnue par les navigateurs.
aspect-ratio
pour donner une préférence largeur/hauteur dans la dimension des éléments.aspect-ratio
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
.
-
Module CSS - Dimensionnement des blocs Niveau 4
Première inscription dans la norme de la propriétéaspect-ratio
.26 Mai 2020Document de travail.
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.