From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/object-position/index.html | 112 ---------------------------- files/fr/web/css/object-position/index.md | 112 ++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 112 deletions(-) delete mode 100644 files/fr/web/css/object-position/index.html create mode 100644 files/fr/web/css/object-position/index.md (limited to 'files/fr/web/css/object-position') diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html deleted file mode 100644 index 8ef2e87a95..0000000000 --- a/files/fr/web/css/object-position/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: object-position -slug: Web/CSS/object-position -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/object-position ---- -
{{CSSRef}}
- -

La propriété object-position détermine l'alignement d'un élément remplacé au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.

- -
{{EmbedInteractiveExample("pages/css/object-position.html")}}
- -
-

Note : Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.

-
- -

Syntaxe

- -
/* Valeurs de positionnement */
-/* Type <position>           */
-object-position: center top;
-object-position: 100px 50px;
-
-/* Valeurs globales */
-object-position: inherit;
-object-position: initial;
-object-position: unset;
-
- -

Valeurs

- -
-
<position>
-
Une valeur de type {{cssxref("<position>")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
-<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
-
- -

CSS

- -
img {
-   width: 300px;
-   height: 250px;
-   border: 1px solid black;
-   background-color: silver;
-   margin-right: 1em;
-   object-fit: none;
-}
-
-#object-position-1 {
-  object-position: 10px;
-}
-
-#object-position-2 {
-  object-position: 100% 10%;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%','300px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.object-position")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md new file mode 100644 index 0000000000..8ef2e87a95 --- /dev/null +++ b/files/fr/web/css/object-position/index.md @@ -0,0 +1,112 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

La propriété object-position détermine l'alignement d'un élément remplacé au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ +
+

Note : Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.

+
+ +

Syntaxe

+ +
/* Valeurs de positionnement */
+/* Type <position>           */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Valeurs globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Valeurs

+ +
+
<position>
+
Une valeur de type {{cssxref("<position>")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+
+ +

CSS

+ +
img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%','300px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.object-position")}}

+ +

Voir aussi

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