diff options
Diffstat (limited to 'files/fr/web/css/@media/aspect-ratio')
| -rw-r--r-- | files/fr/web/css/@media/aspect-ratio/index.md | 60 |
1 files changed, 22 insertions, 38 deletions
diff --git a/files/fr/web/css/@media/aspect-ratio/index.md b/files/fr/web/css/@media/aspect-ratio/index.md index 0999d4619e..8c2c20469b 100644 --- a/files/fr/web/css/@media/aspect-ratio/index.md +++ b/files/fr/web/css/@media/aspect-ratio/index.md @@ -7,60 +7,44 @@ tags: - Reference translation_of: Web/CSS/@media/aspect-ratio --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>aspect-ratio</code></strong> est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("<ratio>")}}) entre la largeur et la hauteur de la zone d'affichage (<em>viewport</em>).</p> +**`aspect-ratio`** est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("<ratio>")}}) entre la largeur et la hauteur de la zone d'affichage (_viewport_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>La caractéristique <code>aspect-ratio</code> est définie avec un ratio (type CSS {{cssxref("<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 <strong><code>min-aspect-ratio</code></strong> et <code><strong>max-aspect-ratio</strong></code> afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.</p> +La caractéristique `aspect-ratio` est définie avec un ratio (type CSS {{cssxref("<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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="exemples_de_valeurs_pour_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3> +### Exemples de valeurs pour aspect-ratio -<pre class="brush: css"> +```css aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; -</pre> +``` -<h2 id="Correspondance_entre_width_et_height_et_aspect-ratio">Correspondance entre width et height et aspect-ratio</h2> +## Correspondance entre width et height et 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 aux autres éléments associés qui acceptent des attributs <code>width</code> et <code>height</code>. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.</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 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. -<p>Pour Firefox, la feuille de style interne ressemble à :</p> +Pour Firefox, la feuille de style interne ressemble à : -<pre class="brush: css"> +```css img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); -}</pre> +} +``` -<p>Pour en savoir plus, vous pouvez consulter <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Définir la hauteur et largeur des images redevient important (en anglais)</a>.</p> +Pour en savoir plus, vous pouvez consulter [Définir la hauteur et largeur des images redevient important (en anglais)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS4 Media Queries')}} | Aucune modification. | +| {{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> +{{Compat("css.at-rules.media.aspect-ratio")}} |