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 : 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>

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: 150px; 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.

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.

Sådan angives værdier

object-position kan angive positioner ved hjælp af én, to eller fire værdier. Dog understøtter ældre browsere muligvis ikke angivelse af fire værdier.

Angivelse af én værdi

Hvis kun én værdi er angivet, fortolkes den som den horisontale (X-akse) position, og den vertikale (Y-akse) sættes automatisk til center.

  • Når det angives som object-position: left;, placeres objektet til venstre.
  • Når det angives som object-position: 70%;, placeres objektet 70% horisontalt og centreres vertikalt.
  • Når det angives som object-position: 50px;, placeres objektet 50px fra venstre og centreres vertikalt.

Angivelse af to værdier

Ved angivelse af to værdier kan du individuelt indstille horisontal (X-akse) og vertikal (Y-akse) position.

  • Når det angives som object-position: center center;, centreret objektet.
  • Når det angives som object-position: right top;, placeres objektet øverst til højre.
  • Når det angives som object-position: 75% 20%;, placeres objektet 75% horisontalt og 20% vertikalt.
  • Når det angives som object-position: 50px 25px;, placeres objektet 50px fra venstre og 25px fra toppen.

Angivelse af fire værdier

Ved at angive fire værdier kan du give mere detaljeret placering ved at bruge nøgleord som left eller top sammen med deres offset.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Når det angives som object-position: left 10px top 20px;, placeres objektet 10px fra venstre og 20px fra toppen.
  • Når det angives som object-position: right 15% bottom 30px;, placeres objektet 15% fra højre og 30px fra bunden.
Format til værdispecifikation

object-position kan acceptere følgende værdi-formater.

  • Du kan angive nøgleord som top, right, bottom, left og center.
  • Du kan også angive værdier ved hjælp af procenter som 50% eller enheder som px.

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: right bottom;
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

Du kan angive følgende værdier for object-fit.

  • 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.

For eksempel vil object-fit: contain vise hele billedet og placere det i henhold til indstillingen for object-position.

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

Med denne indstilling placeres billedet på højre side af beholderen, 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` EgenskaberCSS-egenskaber relateret til gennemsigtighed