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