Articles
Introduction au CSS
`object-fit` et `object-position` Propriétés

`object-fit` et `object-position` Propriétés

Cet article explique les propriétés object-fit et object-position.

Vous pouvez apprendre à organiser des objets tels que des images et des vidéos et à les écrire en CSS.

YouTube Video

HTML pour l'aperçu

css-object-fit-position.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Concernant l'ajustement des objets

Propriété object-fit

La propriété CSS object-fit est principalement utilisée pour contrôler comment les images, vidéos et autres contenus s'ajustent à leurs éléments conteneurs. En utilisant cette propriété, vous pouvez spécifier de manière flexible comment les éléments spécifiés sont redimensionnés et positionnés esthétiquement. Elle est très utile pour ajuster l'affichage des images ou vidéos en les recadrant ou les redimensionnant lorsqu'elles ne s'adaptent pas à l'élément parent.

Valeurs de object-fit

fill (Valeur par défaut) 
1img {
2  object-fit: fill;
3}

fill est la valeur par défaut, où les images ou vidéos sont étirées de force pour correspondre entièrement à la largeur et à la hauteur de l'élément parent. Dans ce cas, le rapport d'aspect original est ignoré, ce qui peut entraîner une distorsion de l'image.

  • Il s'adapte complètement à la taille de l'élément parent.
  • Comme le rapport d'aspect est ignoré, les images ou vidéos peuvent être étirées verticalement ou horizontalement.
contain 
1img {
2  object-fit: contain;
3}

contain redimensionne le contenu pour qu'il s'adapte entièrement à l'intérieur de l'élément parent tout en conservant le rapport d'aspect. Il ne dépasse pas la taille de l'élément parent, et il peut y avoir des marges sur les côtés verticaux ou horizontaux.

  • L'intégralité du contenu est affichée.
  • Pour préserver le rapport d'aspect original, des marges (effet letterbox ou pillarbox) peuvent apparaître.
cover 
1img {
2  object-fit: cover;
3}

cover redimensionne le contenu pour couvrir complètement l'élément parent tout en conservant le rapport d'aspect. Une partie du contenu peut être recadrée pour s'adapter à l'élément parent, mais l'ensemble de l'élément remplit le conteneur, sans espaces.

  • Le contenu couvre entièrement l'élément parent.
  • Il peut être rogné tout en conservant le rapport d'aspect d'origine.
  • Couramment utilisé pour des images de fond ou des images de section principale.
none 
1img {
2  object-fit: none;
3}

none affiche les images ou vidéos dans leur taille et rapport d'aspect d'origine. Il ne s'ajuste pas à la taille de l'élément parent, et le contenu déborde si nécessaire.

  • La taille d'origine du contenu est conservée.
  • Aucun redimensionnement n'est effectué pour ajuster le contenu à l'élément parent.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down est une valeur qui combine le comportement de none et contain. Si le contenu s'adapte à l'élément parent, il se comporte comme none, mais si le contenu est trop grand, il applique le comportement de contain et est réduit pour s'adapter.

  • Le contenu est réduit s'il est plus grand que l'élément parent.
  • Il est affiché à sa taille d'origine s'il est plus petit.

Exemple d'utilisation

Ajustement des images de fond à l'élément parent

Par exemple, pour étendre une image sur tout l'écran avec une conception réactive, il est courant d'utiliser cover. Le code suivant est un exemple d'ajustement d'une image à l'élément parent, même si elle est rognée.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

Dans ce cas, l'image couvre entièrement l'élément parent, maintenant un bel agencement sur tous les formats d'écran. Si le rapport d'aspect est différent, certaines parties de l'image peuvent ne pas être visibles, mais cela permet une présentation adaptée au design.

Afficher des images tout en maintenant le rapport d'aspect

Ensuite, si vous voulez adapter l'image entière à l'élément parent tout en maintenant son rapport d'aspect, contain est approprié.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

Dans cet exemple, l'image est réduite pour s'adapter au conteneur, ce qui entraîne un certain remplissage, mais l'image originale est affichée sans distorsion.

Erreurs courantes

Une erreur courante lors de l'utilisation de object-fit est de ne pas définir la taille de l'élément parent. object-fit est une propriété permettant d'adapter le contenu à l'élément parent, donc si la taille de l'élément parent n'est pas définie, l'effet attendu ne peut être obtenu. Assurez-vous que l'élément parent a une width ou une height correctement définie.

Par exemple, dans le code suivant, la hauteur de l'élément parent n'est pas spécifiée, donc object-fit ne fonctionne pas comme prévu.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

Dans ce cas, vous devez spécifier la hauteur de l'élément parent ou ajuster l'ensemble de la mise en page à l'aide de flexbox ou d'un layout de grille.

Situations où object-fit doit être utilisé

object-fit est important, surtout dans les conceptions responsives et les sites web adaptés à différentes tailles d'écran. Par exemple, il est utile dans les cas suivants :.

  • Lorsque vous souhaitez ajuster les images ou vidéos pour qu'elles s'affichent correctement sur différents appareils
  • Lorsque vous souhaitez afficher des images de fond ou similaires en plein écran tout en permettant une découpe
  • Lorsque vous souhaitez ajuster une image dans un élément parent tout en conservant son ratio d'aspect
  • Lorsque vous souhaitez afficher des tailles d'image cohérentes, comme dans des galeries

Utiliser object-fit dans ces situations peut maintenir la cohérence du design et améliorer l'expérience utilisateur.

Résumé

object-fit est une propriété CSS puissante qui permet de contrôler de manière flexible la façon dont les images et vidéos sont affichées par rapport à leurs éléments parents sur une page web. En utilisant différentes valeurs comme fill, contain, cover, none et scale-down, vous pouvez répondre à divers besoins de conception. En comprenant comment l'utiliser correctement et en l'appliquant de manière appropriée, vous pouvez obtenir des mises en page visuellement attrayantes.

Maîtrisez l'utilisation de object-fit pour créer des conceptions responsives et esthétiques.

Propriété object-position

La propriété CSS object-position est utilisée pour contrôler le positionnement de contenus tels que les images et vidéos à l'intérieur d'un élément. En utilisant object-position, vous pouvez positionner le contenu à des points spécifiques et offrir des effets visuels adaptés à la mise en page.

Présentation de object-position

object-position s'applique principalement aux éléments média tels que les balises <img> et <video>. Cette propriété contrôle l'endroit où le média est affiché dans son conteneur. object-fit est souvent utilisé en combinaison avec object-position, où object-fit définit comment une image ou une vidéo s'adapte à la taille du cadre, et object-position ajuste la position d'affichage du contenu.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • Dans cet exemple, l'image est mise à l'échelle pour s'adapter au conteneur (object-fit: cover), et positionnée de manière à ce que son centre soit affiché (object-position: center).

Comment spécifier des valeurs

object-position est spécifié avec deux valeurs comme suit.

  • Position horizontale (axe X)
  • Position verticale (axe Y)
Format de Spécification des Valeurs

Dans object-position, vous pouvez spécifier les valeurs dans le format suivant.

  • Mots-clés : top, right, bottom, left, center
  • Pourcentage : de 0% à 100%
  • Unités de longueur : px, em, rem, etc.

Par exemple, vous pouvez l’utiliser comme ceci.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Combinaison de mots-clés et de pourcentages

Il est également possible de mélanger des mots-clés et des pourcentages.

1img {
2    object-position: right 50%;
3}
  • Dans cet exemple, l'image est placée au bord droit et centrée verticalement à 50%. Cette combinaison est très utile lorsqu'un positionnement flexible est nécessaire.

Combinaison avec object-fit

object-position est souvent utilisé avec object-fit. object-fit détermine comment une image ou une vidéo est redimensionnée par rapport à son cadre. Par exemple, utiliser object-fit: cover découpe l'image pour qu'elle s'adapte au cadre et la positionne selon le object-position spécifié.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}
  • Dans cet exemple, l'image s'étend sur tout le conteneur, affichant la partie inférieure droite du contenu.
Exemples combinés avec les valeurs de object-fit
  • fill : L'image peut être déformée, mais elle s'adapte à l'ensemble du conteneur.
  • contain : L'image entière est affichée tout en conservant le rapport d'aspect.
  • cover : Découpé pour s'adapter au conteneur tout en conservant le rapport d'aspect.
  • none : L'image est affichée à sa taille d'origine.
1img {
2    object-fit: contain;
3    object-position: top;
4}

Dans ce paramètre, l'image est placée en haut du conteneur, et l'image entière est affichée.

Utilisation avancée

object-position peut être appliqué dans divers scénarios, non seulement pour des ajustements simples de positionnement, mais aussi pour améliorer les effets visuels.

Mettre en avant une partie de l'image

C'est utile lorsque vous souhaitez vous concentrer sur une partie spécifique de l'image plutôt que d'afficher l'image entière. Définissez object-fit sur cover et utilisez object-position pour vous concentrer sur une zone spécifique.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • Dans cet exemple, la partie inférieure gauche de l'image est affichée, mettant en avant des éléments importants.
Lors de l'utilisation d'une vidéo comme arrière-plan

object-position est également utile lors de l'utilisation d'une vidéo comme arrière-plan. Vous pouvez positionner la vidéo à un emplacement précis pour maintenir la cohérence avec le design global de la page.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • Dans cette configuration, la vidéo couvre l'intégralité de la page et est positionnée en haut au centre.

Problèmes courants et solutions

Il peut y avoir quelques problèmes lors de l'utilisation de object-position. Ici, nous présentons les problèmes courants et leurs solutions.

Une partie de l'image est coupée

Lors de l'utilisation de object-fit: cover, l'image peut être recadrée pour s'adapter au conteneur. Dans ce cas, en ajustant la position d'affichage avec object-position, vous pouvez vous assurer que les parties importantes sont affichées.

1img {
2    object-fit: cover;
3    object-position: center;
4}
La position de l'image n'est pas comme prévu

Les spécifications en pourcentage peuvent ne pas toujours être intuitives. Il est nécessaire de prendre en compte la taille et le format du conteneur et d'expérimenter avec différentes valeurs. Utiliser les outils de développement pour ajuster en temps réel est efficace.

Résumé

object-position est un outil puissant pour positionner librement les éléments multimédias. En le combinant avec object-fit, des mises en page flexibles adaptées au design peuvent être réalisées. Maîtrisez les mots-clés, les pourcentages et les unités de longueur pour maximiser les effets visuels dans différentes situations.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

`overflow` et `contain` Propriétés