diff options
Diffstat (limited to 'files/fr/web/css/@media/aspect-ratio/index.html')
| -rw-r--r-- | files/fr/web/css/@media/aspect-ratio/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..085c611aa0 --- /dev/null +++ b/files/fr/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,111 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/aspect-ratio +--- +<div>{{CSSRef}}</div> + +<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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<div class="note"> +<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><label id="wf" for="w">width:165</label> +<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> +<label id="hf" for="w">height:165</label> +<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> + +<iframe id="outer" src="data:text/html, + <style> + @media (min-aspect-ratio: 8/5) { + div { + background: %239af; + } + } + @media (max-aspect-ratio: 3/2) { + div { + background: %239ff; + } + } + @media (aspect-ratio: 1/1) { + div { + background: %23f9a; + } + } + </style> + <div id='inner'> + Vous pouvez redimensionner le viewport en largeur + et en hauteur pour voir l'effet. + </div> +"> + +</iframe> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">iframe{ + display:block; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">outer.style.width=outer.style.height="165px" + +w.onchange=w.oninput=function(){ + outer.style.width=w.value+"px" + wf.textContent="width:"+w.value +} +h.onchange=h.oninput=function(){ + outer.style.height=h.value+"px" + hf.textContent="height:"+h.value +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<div style="overflow: auto;"> +<p>{{EmbedLiveSample('Exemples')}}</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> |