diff options
Diffstat (limited to 'files/fr/web/css/aspect-ratio')
| -rw-r--r-- | files/fr/web/css/aspect-ratio/index.md | 70 |
1 files changed, 35 insertions, 35 deletions
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' --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> définit un <strong>ratio d'affichage préférentiel</strong> pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.</p> +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. -<pre class="brush:css no-line-numbers">aspect-ratio: 1 / 1; +```css +aspect-ratio: 1 / 1; /* Valeurs globales */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: revert; aspect-ratio: unset; -</pre> +``` -<h3 id="values">Valeurs</h3> +### Valeurs -<dl> - <dt>{{cssxref("<auto>")}}</dt> - <dd>Les <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> ayant leur propre ratio d'affichage intrinsèque, ils utilisent <em>ce dernier</em>. 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.</dd> - <dt>{{cssxref("<ratio>")}}</dt> - <dd>Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par <code>width</code> / <code>height</code>. 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 <code>box-sizing</code>.</dd> -</dl> +- {{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`. -<h2 id="formal_definition">Définition formelle</h2> +## Définition formelle -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="formal_syntax">Syntaxe formelle</h2> +## Syntaxe formelle -<p>{{csssyntax}}</p> +{{csssyntax}} -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="examples_of_values_for_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3> +### Exemples de valeurs pour aspect-ratio -<pre class="brush: css">aspect-ratio: 1 / 1; +```css +aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; -</pre> +``` -<h2 id="mapping_width_and_height_to_aspect-ratio">Correspondance entre largeur et hauteur avec aspect-ratio</h2> +## Correspondance entre largeur et hauteur avec aspect-ratio -<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et à d'autres éléments liés qui acceptent les attributs <code>width</code> et <code>height</code>. Cela se passe dans la feuille de styles interne du navigateur.</p> +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. -<p>Sur Firefox, la règle de la feuille de styles interne ressemble à cela :</p> +Sur Firefox, la règle de la feuille de styles interne ressemble à cela : -<pre class="brush: css">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); -}</pre> +} +``` -<p>Vous pouvez en savoir plus sur cette fonctionnalité dans l'article <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Setting Height And Width On Images Is Important Again (en anglais)</a>.</p> +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/). -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Media/images/aspect_ratio_mapping">Faire la correspondance des attributs width et height du conteneur des éléments média avec aspect-ratio</a></li> - <li><a href="https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/">Designing an aspect ratio unit for CSS (en anglais)</a></li> -</ul> +- [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/) |