From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/aspect-ratio/index.md | 70 +++++++++++++++++----------------- 1 file changed, 35 insertions(+), 35 deletions(-) (limited to 'files/fr/web/css/aspect-ratio/index.md') diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md index aee0eae8a1..4e7925541b 100644 --- a/files/fr/web/css/aspect-ratio/index.md +++ b/files/fr/web/css/aspect-ratio/index.md @@ -1,70 +1,70 @@ --- title: aspect-ratio slug: Web/CSS/aspect-ratio +translation_of: Web/CSS/aspect-ratio browser-compat: css.properties.aspect-ratio -translation_of: 'Web/CSS/aspect-ratio' --- -
{{CSSRef}}
+{{CSSRef}} -

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.

+La propriété [CSS](/fr/docs/Web/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;
+```css
+aspect-ratio: 1 / 1;
 
 /* Valeurs globales */
 aspect-ratio: inherit;
 aspect-ratio: initial;
 aspect-ratio: revert;
 aspect-ratio: unset;
-
+``` -

Valeurs

+### Valeurs -
-
{{cssxref("<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.
-
{{cssxref("<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 par box-sizing.
-
+- {{cssxref("<auto>")}} + - : Les [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) 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. +- {{cssxref("<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 par `box-sizing`. -

Définition formelle

+## Définition formelle -

{{cssinfo}}

+{{cssinfo}} -

Syntaxe formelle

+## Syntaxe formelle -

{{csssyntax}}

+{{csssyntax}} -

Exemples

+## Exemples -

Exemples de valeurs pour aspect-ratio

+### Exemples de valeurs pour aspect-ratio -
aspect-ratio: 1 / 1;
+```css
+aspect-ratio: 1 / 1;
 aspect-ratio: 16 / 9;
-
+``` -

Correspondance entre largeur et hauteur avec aspect-ratio

+## 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.

+Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) 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 :

+Sur Firefox, la règle de la feuille de styles interne ressemble à cela : -
img, input[type="image"], video, embed, iframe, marquee, object, table {
+```css
+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).

+Vous pouvez en savoir plus sur cette fonctionnalité dans l'article [Setting Height And Width On Images Is Important Again (en anglais)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Voir aussi

+## Voir aussi - +- [Faire la correspondance des attributs width et height du conteneur des éléments média avec aspect-ratio](/fr/docs/Web/Media/images/aspect_ratio_mapping) +- [Designing an aspect ratio unit for CSS (en anglais)](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/) -- cgit v1.2.3-54-g00ecf