diff options
Diffstat (limited to 'files/fr/web/css/background-size/index.md')
| -rw-r--r-- | files/fr/web/css/background-size/index.md | 273 |
1 files changed, 127 insertions, 146 deletions
diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md index 3ab7be1f5f..71cebb4b98 100644 --- a/files/fr/web/css/background-size/index.md +++ b/files/fr/web/css/background-size/index.md @@ -7,19 +7,18 @@ tags: - Reference translation_of: Web/CSS/background-size --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété CSS <strong><code>background-size</code></strong> définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.</p> +La propriété CSS **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions. -<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-size.html")}} -<div class="note"> -<p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p> -</div> +> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ background-size: cover; background-size: contain; @@ -48,90 +47,75 @@ background-size: 6px, auto, contain; background-size: inherit; background-size: initial; background-size: unset; -</pre> - -<p>La propriété <code>background-size</code> peut être définie de différentes façons :</p> - -<ul> - <li>Avec l'un des mots-clés <code><a href="#contain">contain</a></code> ou <code><a href="#cover">cover</a></code>.</li> - <li>Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors <code><a href="#auto">auto</a></code> par défaut)</li> - <li>Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore <code><a href="#auto">auto</a></code>.</li> -</ul> - -<p>Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).</p> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>contain</code></dt> - <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd> - <dt><code>cover</code></dt> - <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd> - <dt><code>auto</code></dt> - <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd> - <dt><code><length></code></dt> - <dd>Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd> - <dt><code><percentage></code></dt> - <dd>Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd> -</dl> - -<h3 id="Dimensions_intrinsèques_et_proportions">Dimensions intrinsèques et proportions</h3> - -<p>Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :</p> - -<ul> - <li>Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.</li> - <li>Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.</li> - <li>Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque.</li> - <li>Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Le comportement associé aux dégradés (<code><gradient></code>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.</p> -</div> - -<div class="note"> -<p><strong>Note :</strong> Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.</p> -</div> - -<p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p> - -<ul> - <li><p>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> : L'image utilise la taille définie.</p></li> - <li><p>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</p></li> - <li><p>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</p> - <ul> - <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li> - <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li> - <li>Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur <code>contain</code> avait été utilisée.</li> - <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li> - <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li> - </ul> - <div class="note"><p><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</p></div> -</li> - <li><p>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</p> - <ul> - <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li> - <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li> - </ul> - </li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p> -</div> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +La propriété `background-size` peut être définie de différentes façons : + +- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover). +- Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors [`auto`](#auto) par défaut) +- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore [`auto`](#auto). + +Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}). + +### Valeurs + +- `contain` + - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée. +- `cover` + - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan). +- `auto` + - : Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées. +- `<length>` + - : Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées. +- `<percentage>` + - : Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (_padding_) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées. + +### Dimensions intrinsèques et proportions + +Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles : + +- Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques. +- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. +- Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque. +- Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur. + +> **Note :** Le comportement associé aux dégradés (`<gradient>`) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan. + +> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. + +Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : + +- Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` : L'image utilise la taille définie. +- Si `background-size` vaut `contain` ou `cover` : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan. +- Si `background-size` vaut `auto` ou `auto auto` : + + - Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée. + - Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan. + - Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée. + - Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion. + - Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan. + + > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`. + +- Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` : + + - Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion. + - Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe. + +> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="cover_2"><code>cover</code></h3> +### `cover` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { height: 300px; width: 200px; background-color: palegreen; @@ -141,21 +125,25 @@ background-size: unset; .exemple_cover { background-size: cover; -}</pre> +} +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="exemple_cover"></div></pre> +```html +<div class="exemple_cover"></div> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("cover","200","300")}}</p> +{{EmbedLiveSample("cover","200","300")}} -<h3 id="contain_2"><code>contain</code></h3> +### `contain` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { height: 300px; width: 200px; background-color: palegreen; @@ -165,21 +153,25 @@ background-size: unset; .exemple_cover { background-size: contain; -}</pre> +} +``` -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div class="exemple_cover"></div></pre> +```html +<div class="exemple_cover"></div> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("contain","200","300")}}</p> +{{EmbedLiveSample("contain","200","300")}} -<h3 id="auto_50"><code>auto 50%</code></h3> +### `auto 50%` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { height: 300px; width: 200px; background-color: palegreen; @@ -189,21 +181,25 @@ background-size: unset; .exemple_cover { background-size: auto 50%; -}</pre> +} +``` -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html"><div class="exemple_cover"></div></pre> +```html +<div class="exemple_cover"></div> +``` -<h4 id="Résultat_3">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("auto_50","200","300")}}</p> +{{EmbedLiveSample("auto_50","200","300")}} -<h2 id="Notes">Notes</h2> +## Notes -<p>Si on utilise un dégradé (<code><gradient></code>) comme arrière-plan et qu'on définit une valeur associée pour la propriété <code>background-size</code>, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant <code>auto</code> ou qu'une seule largeur (par exemple <code>background-size: 50%</code>). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la <a href="https://www.w3.org/TR/css3-background/#the-background-size">spécification CSS3 pour <code>background-size</code></a> et <a href="https://dev.w3.org/csswg/css3-images/#gradients">la spécification CSS3 pour les images qui sont des dégradés</a>).</p> +Si on utilise un dégradé (`<gradient>`) comme arrière-plan et qu'on définit une valeur associée pour la propriété `background-size`, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant `auto` ou qu'une seule largeur (par exemple `background-size: 50%`). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la [spécification CSS3 pour `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [la spécification CSS3 pour les images qui sont des dégradés](https://dev.w3.org/csswg/css3-images/#gradients)). -<pre class="brush: css">.gradient-exemple { +```css +.gradient-exemple { width: 50px; height: 100px; background-image: linear-gradient(blue, red); @@ -218,39 +214,24 @@ background-size: unset; background-size: 25px 50px; background-size: 50% 50%; } -</pre> - -<p>On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec <code>auto</code> lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.</p> - -<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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.background-size")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Redimensionner les images d'arrière-plan</a></li> - <li><a href="/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds">Redimensionner les arrière-plans SVG</a></li> - <li>{{cssxref("object-fit")}}</li> -</ul> +``` + +On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec `auto` lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.background-size")}} + +## Voir aussi + +- [Redimensionner les images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) +- [Redimensionner les arrière-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds) +- {{cssxref("object-fit")}} |