aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/object-position/index.md
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2022-03-15 07:00:50 +0100
committerGitHub <noreply@github.com>2022-03-15 07:00:50 +0100
commitdf8056fc0652ecafffac996081b73435acfab849 (patch)
treeba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/object-position/index.md
parent464e20b22c72324bdaebc232aebefbaca9184a19 (diff)
downloadtranslated-content-df8056fc0652ecafffac996081b73435acfab849.tar.gz
translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.bz2
translated-content-df8056fc0652ecafffac996081b73435acfab849.zip
Remove mozillademo links from CSS (#3642)
* Work - part 1 / N * background-attachment * background-blend-mode * background-image * background-origin * Background position * background-repeat * background-size * border-image * border-image-outset * border-image-repeat * border-image-slice * border-image-width * clip-path * content * cross-fade() * border-radius-generator * multiple bckgrnd * vertical-align * url * text-combine-upright * position_value * image-rendering * using css gradients * font-stretch * font-stretch - add bcd key * font-variant-numeric * font-weight * image-orientation * list-style-image * mask-border * mask-clip * mask-composite * mask-image * mask-mode * mask-origin * mask-position * mask-size * object-fit * object-position * position * Various fixes and improvements * Remove unecessary files * Remove unecessary files (part 2) * Missed level 1 fixes Co-authored-by: cw118 <carolyn94118@gmail.com>
Diffstat (limited to 'files/fr/web/css/object-position/index.md')
-rw-r--r--files/fr/web/css/object-position/index.md62
1 files changed, 33 insertions, 29 deletions
diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md
index 6028bcbbfd..0198ad2fdf 100644
--- a/files/fr/web/css/object-position/index.md
+++ b/files/fr/web/css/object-position/index.md
@@ -1,19 +1,16 @@
---
title: object-position
slug: Web/CSS/object-position
-tags:
- - CSS
- - Propriété
- - Reference
translation_of: Web/CSS/object-position
+browser-compat: css.properties.object-position
---
{{CSSRef}}
-La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) 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.
+La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) au sein de sa boîte. Les zones de la boîte 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é [`object-fit`](/fr/docs/Web/CSS/object-fit).
-> **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")}}.
+{{EmbedInteractiveExample("pages/css/object-position.html")}}
## Syntaxe
@@ -26,15 +23,20 @@ object-position: 100px 50px;
/* Valeurs globales */
object-position: inherit;
object-position: initial;
+object-position: revert;
object-position: unset;
```
### Valeurs
- `<position>`
- - : Une valeur de type {{cssxref("&lt;position&gt;")}}, 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.
+ - : Une valeur de type [`<position>`](/fr/docs/Web/CSS/position_value), 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.
+
+## Définition formelle
+
+{{cssinfo}}
-### Syntaxe formelle
+## Syntaxe formelle
{{csssyntax}}
@@ -42,21 +44,25 @@ object-position: unset;
### HTML
+Dans ce fragment HTML, on a deux éléments [`<img>`](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN.
+
```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"/>
+<img id="object-position-1" src="mdn.svg" alt="Logo MDN"/>
+<img id="object-position-2" src="mdn.svg" alt="Logo MDN"/>
```
### CSS
+Le code CSS implique la mise en forme par défaut pour les éléments `<img>` et des styles différents pour les deux images.
+
```css
img {
- width: 300px;
- height: 250px;
- border: 1px solid black;
- background-color: silver;
- margin-right: 1em;
- object-fit: none;
+ width: 300px;
+ height: 250px;
+ border: 1px solid black;
+ background-color: silver;
+ margin-right: 1em;
+ object-fit: none;
}
#object-position-1 {
@@ -68,27 +74,25 @@ img {
}
```
+La première image est positionnée avec son bord gauche situé à 10 pixels du bord gauche de la boîte de l'élément. La seconde image est positionnée avec son bord droit poussé sur le bord droit de la boîte de l'élément et est située vers le bas de 10% de la hauteur de la boîte de l'élément.
+
### Résultat
-{{EmbedLiveSample('Exemples', '100%','300px')}}
+{{EmbedLiveSample('', '100%','600px')}}
## Spécifications
-| Spécification | État | Commentaires |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
## Compatibilité des navigateurs
-{{Compat("css.properties.object-position")}}
+{{Compat}}
## Voir aussi
-- Les autres propriétés CSS liées aux images :
+- Les autres propriétés CSS liées aux images&nbsp;:
- - {{cssxref("object-fit")}}
- - {{cssxref("image-orientation")}}
- - {{cssxref("image-rendering")}}
- - {{cssxref("image-resolution")}}
+ - [`object-fit`](/fr/docs/Web/CSS/object-fit)
+ - [`image-orientation`](/fr/docs/Web/CSS/image-orientation)
+ - [`image-rendering`](/fr/docs/Web/CSS/image-rendering)
+ - [`image-resolution`](/fr/docs/Web/CSS/image-resolution)