aspect-ratio
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2021.
La propriété CSS aspect-ratio définit un ratio d'affichage préférentiel pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.
aspect-ratio: 1 / 1;
/* Valeurs globales */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;
Valeurs
<auto>-
Les éléments remplacés ayant leur propre ratio d'affichage intrinsèque, ils utilisent ce dernier. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.
<ratio>-
Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par
width/height. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées parbox-sizing.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | all elements except inline boxes and internal ruby or table boxes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |
Syntaxe formelle
aspect-ratio =
auto ||
<ratio>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
Exemples
Exemples de valeurs pour aspect-ratio
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
Correspondance entre largeur et hauteur avec aspect-ratio
Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et à d'autres éléments liés qui acceptent les attributs width et height. Cela se passe dans la feuille de styles interne du navigateur.
Sur Firefox, la règle de la feuille de styles interne ressemble à cela :
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
aspect-ratio: attr(width) / attr(height);
}
Vous pouvez en savoir plus sur cette fonctionnalité dans l'article Setting Height And Width On Images Is Important Again (en anglais).
Spécifications
| Specification |
|---|
| CSS Box Sizing Module Level 4 # aspect-ratio |
Compatibilité des navigateurs
Chargement…