From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/ratio/index.html | 110 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/fr/web/css/ratio/index.html (limited to 'files/fr/web/css/ratio/index.html') diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html new file mode 100644 index 0000000000..51d9786b28 --- /dev/null +++ b/files/fr/web/css/ratio/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/CSS/ratio +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/ratio +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

+ +

Syntaxe

+ +

Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode U+002F SOLIDUS) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique.

+ +

Exemples

+ +

Utiliser dans une media query

+ +
@media screen and (min-aspect-ratio: 16/9) { … }
+ +

Ratios fréquemment utilisés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 RatioUtilisation
Ratio4_3.png4/3Format traditionnel utilisé par les télévisions au XXe siècle.
Ratio16_9.png16/9Format « moderne » des télévisions.
Ratio1_1.85.png185/100 = 91/50
+ (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format le plus utilisé pour la projection de films depuis les années 1960.
Ratio1_2.39.png239/100
+ (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).
+ +

Exemple appliqué

+ +

CSS

+ +
@media screen and (min-aspect-ratio: 1/1) {
+  .exemple {
+    background-color: palegreen;
+  }
+}
+ +

HTML

+ +
<p class="exemple">
+  Essayez de m'étirer en longueur ou de me réduire en largeur
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_appliqué","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.ratio")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf