From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- .../web/css/scaling_of_svg_backgrounds/index.html | 97 +++++++++++----------- 1 file changed, 49 insertions(+), 48 deletions(-) (limited to 'files/fr/web/css/scaling_of_svg_backgrounds') diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html index 8e48618b9b..8abfc2fcc4 100644 --- a/files/fr/web/css/scaling_of_svg_backgrounds/index.html +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -33,17 +33,16 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

-

no-dimensions-or-ratio.png

- -

Fichier source SVG

+

+

Fichier SVG source

Image sans proportion avec une dimension fixée

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

-

100px-wide-no-height-or-ratio.png

+

-

Fichier source SVG

+

Fichier SVG source

Image avec une dimension fixée et des proportions intrinsèques

@@ -51,23 +50,25 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

-

100px-height-3x4-ratio.png

+

-

Fichier source SVG

+

Fichier SVG source

Image sans largeur ni hauteur mais avec des proportions intrinsèques

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

-

no-dimensions-1x1-ratio.png

+

-

Fichier source SVG

+

Fichier SVG source

Exemples de redimensionnement

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

-
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
+
+

Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.

+

Indiquer des dimensions fixées sur les deux axes

@@ -77,49 +78,49 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG

Avec ces déclarations CSS :

-
background: url(no-dimensions-or-ratio.svg);
+
background: url(no-dimensions-or-ratio.svg);
 background-size: 125px 175px;
 

 
 
On doit obtenir un résultat semblable à :

 
-
fixed-no-dimensions-or-ratio.png

+

 
 
SVG source : Une dimension définie et aucune proportion

 
 
Avec ces déclarations CSS :

 
-
background: url(100px-wide-no-height-or-ratio.svg);
+
background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 250px 150px;
 

 
 
On doit obtenir un résultat semblable à :

 
-
fixed-100px-wide-no-height-or-ratio.png

+

 
 
SVG source : Une dimension définie et des proportions intrinsèques

 
 
Avec ces déclarations CSS :

 
-
background: url(100px-height-3x4-ratio.svg);
+
background: url(100px-height-3x4-ratio.svg);
 background-size: 275px 125px;
 

 
 
On doit obtenir un résultat semblable à :

 
-
fixed-100px-height-3x4-ratio.png

+

 
 
SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

 
 
Avec ces déclarations CSS :

 
-
background: url(no-dimensions-1x1-ratio.svg);
+
background: url(no-dimensions-1x1-ratio.svg);
 background-size: 250px 100px;
 

 
 
On doit obtenir un résultat semblable à :

 
-
fixed-no-dimensions-1x1-ratio.png

+

 
 
Utiliser contain ou cover

 
@@ -131,25 +132,25 @@ background-size: 250px 100px;
 
 
Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

 
-
background: url(no-dimensions-or-ratio.svg);
+
background: url(no-dimensions-or-ratio.svg);
 background-size: contain;
 

 
 
Le résultat obtenu sera :

 
-
no-dimensions-or-ratio-contain.png

+

 
 
SVG source : Une dimension définie et aucune proportion

 
 
De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

 
-
background: url(100px-wide-no-height-or-ratio.svg);
+
background: url(100px-wide-no-height-or-ratio.svg);
 background-size: contain;
 

 
 
Le résultat obtenu sera :

 
-
100px-wide-no-height-or-ratio-contain.png

+

 
 
SVG source : Une dimension définie et des proportions intrinsèques

 
@@ -157,25 +158,25 @@ background-size: contain;
 
 
contain

 
-
background: url(100px-height-3x4-ratio.svg);
+
background: url(100px-height-3x4-ratio.svg);
 background-size: contain;
 

 
 
Le résultat obtenu sera :

 
-
100px-height-3x4-ratio-contain.png

+

 
 
On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

 
 
cover

 
-
background: url(100px-height-3x4-ratio.svg);
+
background: url(100px-height-3x4-ratio.svg);
 background-size: cover;
 

 
 
Le résultat obtenu sera :

 
-
100px-height-3x4-ratio-cover.png

+

 
 
Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

 
@@ -185,25 +186,25 @@ background-size: cover;
 
 
contain

 
-
background: url(no-dimensions-1x1-ratio.svg);
+
background: url(no-dimensions-1x1-ratio.svg);
 background-size: contain;
 

 
 
Le résultat ressemblera à :

 
-
no-dimensions-1x1-ratio-contain.png

+

 
 
On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

 
 
cover

 
-
background: url(no-dimensions-1x1-ratio.svg);
+
background: url(no-dimensions-1x1-ratio.svg);
 background-size: cover;
 

 
 
Le résultat ressemblera à :

 
-
no-dimensions-1x1-ratio-cover.png

+

 
 
Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

 
@@ -215,25 +216,25 @@ background-size: cover;
 
 
Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

 
-
background: url(no-dimensions-or-ratio.svg);
+
background: url(no-dimensions-or-ratio.svg);
 background-size: auto auto;
 

 
 
Voici le résultat obtenu :

 
-
auto-no-dimensions-or-ratio.png

+

 
 
SVG source : une dimension mais aucune proportion intrinsèque

 
 
S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

 
-
background: url(100px-wide-no-height-or-ratio.svg);
+
background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto auto;
 

 
 
Voici le résultat obtenu :

 
-
auto-100px-wide-no-height-or-ratio.png

+

 
 
Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

 
@@ -241,13 +242,13 @@ background-size: auto auto;
 
 
Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

 
-
background: url(100px-height-3x4-ratio.svg);
+
background: url(100px-height-3x4-ratio.svg);
 background-size: auto auto;
 

 
 
Le résultat sera le suivant :

 
-
auto-100px-height-3x4-ratio.png

+

 
 
Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

 
@@ -255,13 +256,13 @@ background-size: auto auto;
 
 
Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

 
-
background: url(no-dimensions-1x1-ratio.svg);
+
background: url(no-dimensions-1x1-ratio.svg);
 background-size: auto auto;
 

 
 
Le résultat ressemblera à :

 
-
auto-no-dimensions-1x1-ratio.png

+

 
 
Utiliser auto et une dimension fixée

 
@@ -271,11 +272,11 @@ background-size: auto auto;
 
 
Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

 
-
background: url(no-dimensions-or-ratio.svg);
+
background: url(no-dimensions-or-ratio.svg);
 background-size: auto 140px;
 

 
-
1auto-no-dimensions-or-ratio.png

+

 
 
Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

 
@@ -283,19 +284,19 @@ background-size: auto 140px;
 
 
Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

 
-
background: url(100px-wide-no-height-or-ratio.svg);
+
background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 200px auto;
 

 
-
100px-wide-no-height-or-ratio-length-auto.png

+

 
 
Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

 
-
background: url(100px-wide-no-height-or-ratio.svg);
+
background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto 125px;
 

 
-
100px-wide-no-height-or-ratio-auto-length.png

+

 
 
Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

 
@@ -303,11 +304,11 @@ background-size: auto 125px;
 
 
Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

 
-
background: url(100px-height-3x4-ratio.svg);
+
background: url(100px-height-3x4-ratio.svg);
 background-size: 150px auto;
 

 
-
1auto-100px-height-3x4-ratio.png

+

 
 
Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

 
@@ -315,11 +316,11 @@ background-size: 150px auto;
 
 
Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

 
-
background: url(no-dimensions-1x1-ratio.svg);
+
background: url(no-dimensions-1x1-ratio.svg);
 background-size: 150px auto;
 

 
-
1auto-no-dimensions-1x1-ratio.png

+

 
 
La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

 
-- 
cgit v1.2.3-54-g00ecf