aspect-ratio
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio (<ratio>) entre la largeur et la hauteur de la zone d'affichage (viewport).
Syntaxe
La caractéristique aspect-ratio est définie avec un ratio (type CSS <ratio>) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.
Exemples
Exemples de valeurs pour aspect-ratio
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
Correspondance entre width et height et aspect-ratio
Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et aux autres éléments associés qui acceptent des attributs width et height. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.
Pour Firefox, la feuille de style interne ressemble à :
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
aspect-ratio: attr(width) / attr(height);
}
Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).
Spécifications
| Specification |
|---|
| Media Queries Level 4 # aspect-ratio |
Compatibilité des navigateurs
BCD tables only load in the browser