Articles
Introductie tot CSS
`object-fit` en `object-position` Eigenschappen

`object-fit` en `object-position` Eigenschappen

Dit artikel legt de object-fit en object-position eigenschappen uit.

Je kunt leren hoe je objecten zoals afbeeldingen en video's kunt rangschikken en hoe je ze in CSS schrijft.

YouTube Video

HTML voor Voorbeeldweergave

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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</html>

Gerelateerd aan Objectaanpassing

object-fit Eigenschap

De CSS-eigenschap object-fit wordt voornamelijk gebruikt om te bepalen hoe afbeeldingen, video's en andere inhoud binnen hun containerelementen passen. Met deze eigenschap kun je flexibel bepalen hoe de gespecificeerde elementen worden herzien en esthetisch worden gepositioneerd. Het is erg handig voor het aanpassen van de weergave van afbeeldingen of video's door bij te snijden of te schalen wanneer ze niet in het bovenliggende element passen.

object-fit Waarden

fill (Standaardwaarde) 
1img {
2  object-fit: fill;
3}

fill is de standaardwaarde, waarbij afbeeldingen of video's geforceerd worden uitgerekt om volledig in de breedte en hoogte van het bovenliggende element te passen. In dit geval wordt de originele beeldverhouding genegeerd, wat vervorming van de afbeelding kan veroorzaken.

  • Het past volledig in de grootte van het bovenliggende element.
  • Omdat de beeldverhouding wordt genegeerd, kunnen afbeeldingen of video's verticaal of horizontaal worden uitgerekt.
contain 
1img {
2  object-fit: contain;
3}

contain past de inhoud zo aan dat deze volledig binnen het bovenliggende element past terwijl de beeldverhouding behouden blijft. Het overschrijdt niet de grootte van het bovenliggende element, en er kan opvulling zijn aan de verticale of horizontale zijde.

  • De volledige inhoud wordt weergegeven.
  • Om de originele beeldverhouding te behouden, kan opvulling (letterbox- of pillarbox-effect) verschijnen.
cover 
1img {
2  object-fit: cover;
3}

cover past de inhoud zo aan dat deze volledig het bovenliggende element bedekt terwijl de beeldverhouding behouden blijft. Sommige inhoud kan worden bijgesneden om in het bovenliggende element te passen, maar het gehele element vult de container waardoor er geen lege ruimtes ontstaan.

  • De inhoud bedekt volledig het bovenliggende element.
  • Het kan worden bijgesneden terwijl de oorspronkelijke beeldverhouding behouden blijft.
  • Wordt vaak gebruikt voor achtergrondafbeeldingen of afbeeldingen in hero-secties.
none 
1img {
2  object-fit: none;
3}

none toont afbeeldingen of video's in hun oorspronkelijke grootte en beeldverhouding. Het past zich niet aan aan de grootte van het bovenliggende element, en inhoud loopt over indien nodig.

  • De oorspronkelijke grootte van de inhoud blijft behouden.
  • Er wordt geen aanpassing van de grootte gedaan om de inhoud in het bovenliggende element te passen.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down is een waarde die het gedrag van none en contain combineert. Als de inhoud in het bovenliggende element past, gedraagt het zich als none, maar als de inhoud te groot is, wordt het gedrag van contain toegepast en wordt het verkleind om te passen.

  • De inhoud wordt verkleind als het groter is dan het bovenliggende element.
  • Het wordt weergegeven in de oorspronkelijke grootte als het kleiner is.

Voorbeeldgebruik

Achtergrondafbeeldingen aanpassen aan het bovenliggende element

Bijvoorbeeld, om een afbeelding over het hele scherm te spreiden met aandacht voor responsief design, wordt vaak cover gebruikt. De onderstaande code is een voorbeeld van het nauw laten aansluiten van een afbeelding binnen het bovenliggende element, zelfs als deze wordt bijgesneden.

 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>

In dit geval bedekt de afbeelding het bovenliggende element volledig, met behoud van een fraaie indeling op elk schermformaat. Als de beeldverhouding anders is, zijn sommige delen van de afbeelding mogelijk niet zichtbaar, maar wordt een presentatie bereikt die geschikt is voor het ontwerp.

Afbeeldingen weergeven met behoud van de beeldverhouding

Als u vervolgens de volledige afbeelding in het bovenliggende element wilt passen terwijl de beeldverhouding behouden blijft, is contain geschikt.

 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>

In dit voorbeeld wordt de afbeelding verkleind om in de container te passen, wat resulteert in enige opvulling, maar de oorspronkelijke afbeelding wordt zonder vervorming weergegeven.

Veelvoorkomende fouten

Een veelvoorkomende fout bij het gebruik van object-fit is het niet instellen van de grootte van het bovenliggende element. object-fit is een eigenschap om inhoud aan te passen aan het bovenliggende element, dus als de grootte van het bovenliggende element niet duidelijk is, kan het verwachte effect niet worden bereikt. Zorg ervoor dat het bovenliggende element width of height correct heeft ingesteld.

Bijvoorbeeld, in de onderstaande code is de hoogte van het bovenliggende element niet gespecificeerd, dus werkt object-fit niet zoals bedoeld.

 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: 150px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

In dit geval moet u de hoogte van het bovenliggende element specificeren of de gehele indeling aanpassen met behulp van flexbox of grid layout.

Situaties waarin object-fit zou moeten worden gebruikt

object-fit is belangrijk, vooral in responsieve ontwerpen en websites die verschillende schermformaten ondersteunen. Bijvoorbeeld, het is nuttig in de volgende gevallen:.

  • Wanneer je afbeeldingen of video's wilt aanpassen om correct weer te geven op verschillende apparaten
  • Wanneer je achtergrondafbeeldingen of vergelijkbaar volledig scherm wilt weergeven terwijl bijsnijden is toegestaan
  • Wanneer je een afbeelding in een bovenliggend element wilt laten passen terwijl de beeldverhouding behouden blijft
  • Wanneer je afbeeldingsgroottes consequent wilt weergeven, zoals in galerijen

Het gebruik van object-fit in deze situaties kan zorgen voor ontwerpconsistentie en de gebruikerservaring verbeteren.

Samenvatting

object-fit is een krachtige CSS-eigenschap waarmee je flexibel kunt bepalen hoe afbeeldingen en video's worden weergegeven ten opzichte van hun bovenliggende elementen op een webpagina. Door verschillende waarden te gebruiken, zoals fill, contain, cover, none en scale-down, kun je aan diverse ontwerpeisen voldoen. Door te begrijpen hoe je het correct gebruikt en het op de juiste manier toepast, kun je visueel aantrekkelijke lay-outs realiseren.

object-position eigenschap

De CSS-eigenschap object-position wordt gebruikt om de positionering van content zoals afbeeldingen en video's binnen een element te regelen. Met object-position kun je content op specifieke punten positioneren en visuele effecten creëren die bij de lay-out passen.

Overzicht van object-position

object-position wordt voornamelijk toegepast op media-elementen zoals <img> tags en <video> tags. Deze eigenschap bepaalt waar in de container de media wordt weergegeven. object-fit wordt vaak gebruikt in combinatie met object-position, waarbij object-fit bepaalt hoe een afbeelding of video in het frame past, en object-position de weergavepositie van de content aanpast.

Hoe waarden te specificeren

Met object-position kun je posities specificeren met één, twee of vier waarden. Het opgeven van vier waarden wordt echter mogelijk niet ondersteund door oudere browsers.

Eén waarde opgeven

Als slechts één waarde wordt opgegeven, wordt deze geïnterpreteerd als de horizontale (X-as) positie en wordt de verticale (Y-as) automatisch op center ingesteld.

  • Als object-position: left; wordt opgegeven, wordt het object aan de linkerkant geplaatst.
  • Als object-position: 70%; wordt opgegeven, wordt het object horizontaal op 70% geplaatst en verticaal gecentreerd.
  • Als object-position: 50px; wordt opgegeven, wordt het object 50px van de linkerkant geplaatst en verticaal gecentreerd.

Twee waarden opgeven

Door twee waarden op te geven kun je de horizontale (X-as) en verticale (Y-as) posities afzonderlijk instellen.

  • Als object-position: center center; wordt opgegeven, wordt het object gecentreerd geplaatst.
  • Als object-position: right top; wordt opgegeven, wordt het object rechtsboven geplaatst.
  • Als object-position: 75% 20%; wordt opgegeven, wordt het object horizontaal op 75% en verticaal op 20% geplaatst.
  • Als object-position: 50px 25px; wordt opgegeven, wordt het object 50px van de linkerkant en 25px van de bovenkant geplaatst.

Vier waarden opgeven

Door vier waarden op te geven, kun je gedetailleerdere positionering opgeven door trefwoorden zoals left of top te gebruiken samen met hun verschuivingen.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Als object-position: left 10px top 20px; wordt opgegeven, wordt het object 10px van de linkerkant en 20px van de bovenkant geplaatst.
  • Als object-position: right 15% bottom 30px; wordt opgegeven, wordt het object 15% van de rechterkant en 30px van de onderkant geplaatst.
Waarde-specificatieformaat

object-position accepteert de volgende waardeformaten.

  • Je kunt trefwoorden opgeven zoals top, right, bottom, left en center.
  • Je kunt ook waarden opgeven met percentages zoals 50% of eenheden zoals px.

Bijvoorbeeld, je kunt het op deze manier gebruiken.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Combinatie van trefwoorden en percentages

Het is ook mogelijk om trefwoorden en percentages te combineren.

1img {
2    object-position: right 50%;
3}
  • In dit voorbeeld wordt de afbeelding aan de rechterrand geplaatst en verticaal gecentreerd op 50%. Deze combinatie is erg handig wanneer flexibele positionering nodig is.

Combinatie met object-fit

object-position wordt vaak samen met object-fit gebruikt. object-fit bepaalt hoe een afbeelding of video wordt heruitgelijnd binnen zijn kader. Bijvoorbeeld, het gebruik van object-fit: cover snijdt de afbeelding bij om binnen het kader te passen en positioneert deze volgens de opgegeven object-position.

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • In dit voorbeeld bedekt de afbeelding de hele container en wordt het onderste rechterdeel van de inhoud weergegeven.
Voorbeelden gecombineerd met object-fit waarden

Je kunt de volgende waarden opgeven voor object-fit.

  • fill: De afbeelding kan vervormd worden, maar past binnen de gehele container.
  • contain: De volledige afbeelding wordt weergegeven met behoud van de beeldverhouding.
  • cover: Bijgesneden om in de container te passen met behoud van de beeldverhouding.
  • none: De afbeelding wordt weergegeven in zijn oorspronkelijke grootte.

Bijvoorbeeld, met object-fit: contain wordt de volledige afbeelding weergegeven en gepositioneerd volgens de instelling van object-position.

1img {
2    object-fit: contain;
3    object-position: right;
4}

Met deze instelling wordt de afbeelding aan de rechterkant van de container geplaatst en wordt de volledige afbeelding weergegeven.

Geavanceerd gebruik

object-position kan in verschillende scenario's worden toegepast, niet alleen voor eenvoudige positioneringsaanpassingen maar ook om visuele effecten te verbeteren.

Een deel van de afbeelding benadrukken

Het is handig wanneer je je wilt richten op een specifiek deel van de afbeelding in plaats van de hele afbeelding weer te geven. Stel object-fit in op cover en gebruik object-position om je te richten op een specifiek gebied.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • In dit voorbeeld wordt het onderste linker deel van de afbeelding weergegeven, waarbij belangrijke delen worden benadrukt.
Bij het gebruik van een video als achtergrond

object-position is ook handig bij het gebruik van een video als achtergrond. Je kunt de video op een specifieke locatie plaatsen om consistentie met het algemene paginadesign te behouden.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • In deze instelling vult de video de volledige pagina en is deze gepositioneerd in het midden bovenaan.

Veelvoorkomende problemen en oplossingen

Er kunnen enkele problemen optreden bij het gebruik van object-position. Hier introduceren we veelvoorkomende problemen en hun oplossingen.

Een gedeelte van de afbeelding wordt afgesneden

Bij gebruik van object-fit: cover kan de afbeelding worden bijgesneden om in de container te passen. In dit geval kun je door de weergavepositie aan te passen met object-position ervoor zorgen dat belangrijke delen zichtbaar zijn.

1img {
2    object-fit: cover;
3    object-position: center;
4}
De afbeelding positie is niet zoals verwacht

Percentage-specificaties zijn niet altijd intuïtief. Het is noodzakelijk om rekening te houden met de grootte en beeldverhouding van de container en te experimenteren met verschillende waarden. Het gebruik van ontwikkelaarstools om in realtime aan te passen is effectief.

Samenvatting

object-position is een krachtig hulpmiddel om media-elementen vrij te positioneren. Door het te combineren met object-fit kunnen flexibele lay-outs worden bereikt die zijn aangepast aan het ontwerp. Beheers sleutelwoorden, percentages en lengteenheden om visuele effecten te maximaliseren in verschillende situaties.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

`overflow` en `contain` Eigenschappen