Articles
Introduktion til CSS
`object-fit` og `object-position` egenskaber

`object-fit` og `object-position` egenskaber

Denne artikel forklarer object-fit og object-position egenskaberne.

Du kan lære, hvordan du arrangerer objekter som billeder og videoer, og hvordan du skriver dem i CSS.

YouTube Video

HTML til forhåndsvisning

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>

Relateret til objekt-tilpasning

object-fit egenskab

CSS-object-fit-egenskaben bruges primært til at kontrollere, hvordan billeder, videoer og andet indhold passer inden for deres containerelementer. Ved at bruge denne egenskab kan du fleksibelt angive, hvordan de specifikke elementer skal ændres i størrelse og æstetisk placeres. Det er meget nyttigt til at justere billed- eller videoafspilningen ved beskæring eller skalering, når de ikke passer ind i det overordnede element.

object-fit værdier

fill (Standardværdi) 
1img {
2  object-fit: fill;
3}

fill er standardværdien, hvor billeder eller videoer strækkes tvangsmæssigt for at passe helt til bredden og højden af det overordnede element. I dette tilfælde ignoreres det oprindelige aspektforhold, hvilket kan forårsage billedforvrængning.

  • Det passer fuldstændigt til størrelsen af det overordnede element.
  • Da aspektforholdet ignoreres, kan billeder eller videoer strækkes lodret eller vandret.
contain 
1img {
2  object-fit: contain;
3}

contain ændrer størrelsen på indholdet, så det passer helt inden for det overordnede element, samtidig med at aspektforholdet bevares. Det overstiger ikke størrelsen af det overordnede element, og der kan være polstring på enten den lodrette eller vandrette side.

  • Hele indholdet vises.
  • For at bevare det oprindelige aspektforhold kan der forekomme polstring (letterbox- eller pillarbox-effekt).
cover 
1img {
2  object-fit: cover;
3}

cover ændrer størrelsen på indholdet, så det fuldstændigt dækker det overordnede element, samtidig med at aspektforholdet bevares. Noget indhold kan blive beskåret for at passe til det overordnede element, men hele elementet fylder containeren, så der ikke opstår huller.

  • Indholdet dækker fuldstændigt det overordnede element.
  • Det kan beskæres, mens det oprindelige billedformat bevares.
  • Bruges ofte til baggrundsbilleder eller billeder i hero-sektionen.
none 
1img {
2  object-fit: none;
3}

none viser billeder eller videoer i deres oprindelige størrelse og billedformat. Det tilpasser sig ikke størrelsen på forældreelementet, og indholdet kan flyde over, hvis det er nødvendigt.

  • Indholdets oprindelige størrelse bevares.
  • Der udføres ingen skalering for at tilpasse indholdet til forældreelementet.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down er en værdi, der kombinerer adfærden fra none og contain. Hvis indholdet passer til forældreelementet, opfører det sig som none, men hvis indholdet er for stort, anvender det adfærden fra contain og skaleres ned for at passe.

  • Indholdet skaleres ned, hvis det er større end forældreelementet.
  • Det vises i sin oprindelige størrelse, hvis det er mindre.

Eksempel på brug

Tilpasning af baggrundsbilleder til forældreelement

For eksempel bruges cover ofte til at dække hele skærmen med responsivt design i tankerne. Følgende kode er et eksempel på at tilpasse et billede tæt til forældreelementet, selvom det bliver beskåret.

 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>

I dette tilfælde dækker billedet fuldstændigt forældreelementet og bevarer et smukt layout på enhver skærm. Hvis billedforholdet er forskelligt, kan nogle dele af billedet ikke være synlige, men det opnår en præsentation, der passer til designet.

Visning af billeder, mens billedformatet bevares

Hvis du vil tilpasse hele billedet til forældreelementet og bevare dets billedformat, er contain velegnet.

 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>

I dette eksempel skaleres billedet ned for at passe til containeren, hvilket giver noget mellemrum, men det oprindelige billede vises uden forvrængning.

Almindelige fejl

En almindelig fejl ved brug af object-fit er ikke at angive størrelsen på forældreelementet. object-fit er en egenskab, der tilpasser indholdet til forældreelementet, så hvis størrelsen af forældreelementet ikke er klar, kan den forventede effekt ikke opnås. Sørg for, at forældreelementet har width eller height korrekt angivet.

For eksempel er højden af forældreelementet ikke angivet i koden nedenfor, så object-fit fungerer ikke som forventet.

 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>

I dette tilfælde skal du angive højden på forældreelementet eller justere hele layoutet ved hjælp af flexbox eller grid-layout.

Situationer, hvor object-fit bør bruges

object-fit er vigtigt, især i responsivt design og på hjemmesider, der henvender sig til forskellige skærmstørrelser. For eksempel er det nyttigt i følgende tilfælde:.

  • Når du vil tilpasse billeder eller videoer, så de vises korrekt på forskellige enheder
  • Når du vil vise baggrundsbilleder eller lignende i fuld skærm, samtidig med at beskæring tillades
  • Når du vil tilpasse et billede til et overordnet element, samtidig med at du bevarer dets størrelsesforhold
  • Når du vil vise billedstørrelser konsekvent, som for eksempel i gallerier

Brugen af object-fit i disse situationer kan bevare designkonsistens og forbedre brugeroplevelsen.

Sammendrag

object-fit er en kraftfuld CSS-egenskab, der giver dig fleksibel kontrol over, hvordan billeder og videoer vises i forhold til deres overordnede elementer på en webside. Ved at bruge forskellige værdier som fill, contain, cover, none og scale-down kan du opfylde forskellige designkrav. Ved at forstå, hvordan det bruges korrekt, og anvende det passende, kan du opnå visuelt tiltalende layouts.

Mestre brugen af object-fit for at skabe responsive og æstetisk behagelige designs.

object-position egenskaben

CSS-egenskaben object-position bruges til at kontrollere placeringen af indhold som billeder og videoer inden for et element. Ved at bruge object-position kan du placere indhold på bestemte punkter og skabe visuelle effekter, der passer til layoutet.

Oversigt over object-position

object-position anvendes primært på medieelementer som <img>-tags og <video>-tags. Denne egenskab styrer, hvor i sin beholder medieindholdet vises. object-fit bruges ofte i kombination med object-position, hvor object-fit fastsætter, hvordan et billede eller en video passer til rammestørrelsen, og object-position justerer visningspositionen af indholdet.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • I dette eksempel skaleres billedet, så det passer til beholderen (object-fit: cover), og placeres, så dets centrum vises (object-position: center).

Sådan angives værdier

object-position angives med to værdier som følger.

  • Vandret position (X-akse)
  • Lodret position (Y-akse)
Format til værdispecifikation

I object-position kan du angive værdier i følgende format.

  • Nøgleord: top, right, bottom, left, center
  • Procent: 0% til 100%
  • Længdeenheder: px, em, rem, osv.

For eksempel kan du bruge det sådan her.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Kombination af nøgleord og procenter

Det er også muligt at blande nøgleord og procenter.

1img {
2    object-position: right 50%;
3}
  • I dette eksempel er billedet placeret i højre kant og vertikalt centreret til 50%. Denne kombination er meget nyttig, når der er behov for fleksibel placering.

Kombination med object-fit

object-position bruges ofte sammen med object-fit. object-fit bestemmer, hvordan et billede eller en video ændres i størrelse i forhold til sin ramme. For eksempel skærer object-fit: cover billedet til for at passe til rammen og placerer det i henhold til den angivne object-position.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}
  • I dette eksempel breder billedet sig over hele containeren og viser den nederste højre del af indholdet.
Eksempler kombineret med object-fit værdier
  • fill: Billedet kan være forvrænget, men det passer til hele containeren.
  • contain: Hele billedet vises, mens billedformatet bevares.
  • cover: Beskåret for at passe til containeren, mens billedformatet bevares.
  • none: Billedet vises i dets originale størrelse.
1img {
2    object-fit: contain;
3    object-position: top;
4}

I denne indstilling placeres billedet øverst i containeren, og hele billedet vises.

Avanceret brug

object-position kan anvendes i forskellige scenarier, ikke kun til simple placeringsjusteringer, men også til at forbedre visuelle effekter.

Fremhævelse af en del af billedet

Det er nyttigt, når du ønsker at fokusere på en bestemt del af billedet i stedet for at vise hele billedet. Indstil object-fit til cover og brug object-position til at fokusere på et specifikt område.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • I dette eksempel vises den nederste venstre del af billedet, hvilket fremhæver vigtige dele.
Når man bruger en video som baggrund

object-position er også nyttig, når en video bruges som baggrund. Du kan placere videoen på en bestemt position for at bevare ensartetheden med det overordnede sideudtryk.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • I denne indstilling passer videoen til hele siden og er placeret øverst i midten.

Almindelige problemer og løsninger

Der kan være nogle få problemer, når man bruger object-position. Her introducerer vi almindelige problemer og deres løsninger.

En del af billedet er skåret væk

Når object-fit: cover bruges, kan billedet blive beskåret for at passe til containeren. I dette tilfælde kan du justere visningspositionen med object-position for at sikre, at vigtige dele vises.

1img {
2    object-fit: cover;
3    object-position: center;
4}
Billedets position er ikke som forventet

Procentbaserede specifikationer er ikke altid intuitive. Det er nødvendigt at tage hensyn til containerens størrelse og aspektforhold og eksperimentere med forskellige værdier. Det er effektivt at bruge udviklerværktøjer til at justere i realtid.

Sammendrag

object-position er et kraftfuldt værktøj til frit at placere medieelementer. Ved at kombinere det med object-fit kan fleksible layouts, som er tilpasset designet, opnås. Behersk nøgleord, procentdele og længdeenheder for at maksimere de visuelle effekter i forskellige situationer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

`overflow` og `contain` Egenskaber