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