Rapport hauteur / largeur - Astuces CSS

La propriété CSS aspect-ratiovous permet de créer des boîtes qui conservent des dimensions proportionnelles où le heightet widthd'une boîte sont calculés automatiquement sous forme de rapport. C'est un peu mathématique, mais l'idée est que vous pouvez diviser une valeur par une autre sur cette propriété et la valeur calculée garantit qu'une boîte reste dans cette proportion.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioest défini dans la spécification CSS Box Sizing Module Level 4, actuellement en version préliminaire. Cela signifie qu'il est toujours en cours et qu'il a une chance de changer. Mais avec Chrome et Firefox qui le soutiennent derrière un drapeau expérimental et Safari Technology Preview l'ajoutant au début de 2021, il y a des signaux forts qui aspect-ratiogagnent beaucoup d'élan.

Syntaxe

aspect-ratio: auto || ;

En clair: aspect-ratioest supposé être autopar défaut ou accepte a comme valeur où .

• Valeur initiale: auto
• S'applique à: tous les éléments à l'exception des boîtes en ligne et des boîtes internes de rubis ou de table
• Héritée: non
• Pourcentages: n / a
• Valeur calculée: mot-clé spécifié ou une paire de nombres
• Type d'animation: discret

Valeurs

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Il fonctionne sur le contenu remplacé et non remplacé

Si vous pensez: "Euh, oui, le navigateur ne fait-il pas déjà cela pour nous sur les images?" la réponse est: absolument . Les navigateurs effectuent des calculs de rapport hauteur / largeur sophistiqués sur le contenu remplacé comme les images. Ainsi, si une image a, disons, une largeur de 500 px, le navigateur fléchit ses algorithmes de mise en page CSS pour conserver les dimensions intrinsèques ou «naturelles» de l'image. La aspect-ratiopropriété peut être utilisée pour remplacer efficacement ces dimensions naturelles.

Mais le contenu non remplacé n'a pas de proportion naturelle. C'est la plupart des choses avec lesquelles nous travaillons, comme les divs. Plutôt que d'essayer de maintenir les proportions naturelles de l'élément, aspect-ratiodéfinit une taille «préférée».

Maintenant, la spécification note actuellement que les anciennes spécifications CSS, notamment CSS 2.1, ne contiennent pas de distinction claire entre le contenu remplacé et non remplacé. Cela signifie que nous pourrions voir quelques cas spéciaux supplémentaires ajoutés à la spécification pour aider à les clarifier. Pour le moment, nous voyons des navigateurs déployer la prise en charge de la définition des ratios d'aspect préférés sur les remplacés et les non-remplacés séparément, où certains des navigateurs avec une prise en charge précoce derrière un indicateur expérimental pourraient uniquement prendre en charge le aspect-ratiocontenu non remplacé. Il vaut vraiment la peine de garder un œil sur la prise en charge du navigateur au fur et à mesure de son évolution.

Il fonctionne seul sans spécifier de widthouheight

Donc, oui, nous pouvons simplement le déposer sur un élément comme celui-ci:

.element ( aspect-ratio: 16 / 9; )

… Et la valeur par défaut de l'élément width: autointervient implicitement pour définir les dimensions de l'élément.

Cela change quand widthou heightsont sur le même élément

Disons que nous avons un élément avec une largeur de 300pxet un aspect-ratiode 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Par nature, aspect-ratioveut calculer les dimensions de l'élément seul et le fera en fonction du contexte dans lequel il est utilisé. Mais avec cela widthajouté, il indique au rapport hauteur / largeur de calculer la boîte de rapport hauteur / largeur de l'élément en utilisant 300pxcomme largeur. En conséquence, c'est comme si nous venions d'écrire:

.element ( height: 100px; width: 300px; )

C'est logique! N'oubliez pas que lorsque non widthou heightsont spécifiés, le navigateur suppose qu'ils le sont autoet part de là. Lorsque nous fournissons des valeurs explicites widthet explicites height, ce sont elles qui sont utilisées.

Il est ignoré dans certaines situations

C'est là que les choses deviennent un peu compliquées, car il y a des cas où on néglige aspect-ratioou où ses calculs sont affectés par d'autres propriétés. Qui comprend:

Lorsque les deux widthet heightsont déclarés sur l'élément

Nous venons de voir comment la déclaration de l'un widthou de l' autre heightélément affectera le calcul de aspect-ratio. Mais si l'élément a déjà à la fois un widthet height, ceux-ci sont utilisés à la place de aspect-ratio. Il nécessite que les deux propriétés soient remplacées aspect-ratio; définir l'un heightou l' autre ou widthseul ne cassera pas le rapport hauteur / largeur de l'élément.

Ça fait des sénes, non? Si l'utilisation de l'un widthou de l' autre heightforce le aspect-ratioà utiliser cette valeur dans le calcul, il s'ensuit logiquement que l'utilisation des deux écraserait aspect-ratiocomplètement puisque les deux valeurs sont déjà fournies et définies.

Lorsque le contenu sort du rapport

En termes simples, si vous avez un élément avec un rapport hauteur / largeur et que le contenu est si long qu'il oblige l'élément à se développer, alors l'élément se développera. Et si l'élément se dilate, ses dimensions changent et, par conséquent, plus de rapport hauteur / largeur. C'est pourquoi la spécification indique que la propriété définit le rapport hauteur / largeur «préféré». C'est préférable, mais non prescrit.

Vous n'aimez pas comment cela fonctionne? La définition min-height: 0;de l'élément permettra au contenu de déborder du rapport hauteur / largeur préféré au lieu de le développer.

Quand il « perd » à min-*et max-*propriétés

Nous avons simplement vu comment cela fonctionne, non? Lorsque le contenu dépasse les dimensions de la boîte, le aspect-ratioest effectivement parti car la boîte se développe avec le contenu. Nous pouvons remplacer cela avec min-width: 0.

En effet , tous les min-*et max-*propriétés généralement bataille widthet heightpour la suprématie dans la guerre sur boîte calculs du modèle. Par exemple:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Mais:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

En effet, min-widthsoit empêche widthde descendre en dessous d'une valeur spécifique, soit il est ignoré car widtha déjà défini l'élément au-delà de la largeur minimale qu'il doit être. La même chose vaut pour min-height, max-widthet max-height.

Le but de tout cela: si nous définissons à la fois une propriété min-*ou max-*sur le même élément aspect-ratioet qu'ils «gagnent» widthou height, alors ceux-ci seront remplacés aspect-ratio. Je vous ai dit que c'était un peu compliqué. ?

Prise en charge du navigateur

C'EST À DIRE	Bord	Firefox	Chrome	Safari	Opéra
Non	Non	86 1,2,3	90 4	TP 5	Non

Chrome Android	Android Firefox	Navigateur Android	Safari sur iOS	Opera Mobile
Non	Non	Non	Non	Non

Plus d'information

Article le 1 juil.2020

Un premier regard sur le "rapport hauteur / largeur"

Sara Cope