Articles
Introduksjon til CSS
`object-fit` og `object-position` Egenskaper

`object-fit` og `object-position` Egenskaper

Denne artikkelen forklarer object-fit og object-position-egenskapene.

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

YouTube Video

HTML for 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>

Objektplassering-Relatert

object-fit-egenskap

CSS-egenskapen object-fit brukes hovedsakelig til å kontrollere hvordan bilder, videoer og annet innhold passer inn i sine beholder-elementer. Ved å bruke denne egenskapen kan du fleksibelt spesifisere hvordan de angitte elementene endres i størrelse og estetikken deres plasseres. Det er veldig nyttig for å justere visningen av bilder eller videoer ved beskjæring eller skalering når de ikke passer innenfor det overordnede elementet.

object-fit-verdier

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

fill er standardverdien, der bilder eller videoer tvinges til å strekke seg helt for å passe bredden og høyden til det overordnede elementet. I dette tilfellet ignoreres det originale størrelsesforholdet, noe som kan forårsake bildevridning.

  • Det passer fullstendig inn i størrelsen på det overordnede elementet.
  • Fordi størrelsesforholdet ignoreres, kan bilder eller videoer bli strukket vertikalt eller horisontalt.
contain 
1img {
2  object-fit: contain;
3}

contain endrer størrelsen på innholdet slik at det passer helt innenfor det overordnede elementet samtidig som størrelsesforholdet bevares. Det overskrider ikke størrelsen på det overordnede elementet, og det kan være polstring på enten den vertikale eller horisontale siden.

  • Alt innholdet vises.
  • For å opprettholde det originale størrelsesforholdet kan det vises polstring (letterbox- eller pillarbox-effekt).
cover 
1img {
2  object-fit: cover;
3}

cover endrer størrelsen på innholdet slik at det dekker det overordnede elementet helt, samtidig som størrelsesforholdet bevares. Noe innhold kan bli beskåret for å passe det overordnede elementet, men hele elementet fyller beholderen, slik at det ikke oppstår noen mellomrom.

  • Innholdet dekker fullstendig det overordnede elementet.
  • Det kan bli beskåret mens det opprinnelige størrelsesforholdet beholdes.
  • Vanlig brukt til bakgrunnsbilder eller bilder i hero-seksjoner.
none 
1img {
2  object-fit: none;
3}

none viser bilder eller videoer i deres opprinnelige størrelse og størrelsesforhold. Det justeres ikke for å passe til størrelsen på det overordnede elementet, og innholdet går over kanten om nødvendig.

  • Den opprinnelige størrelsen på innholdet beholdes.
  • Ingen endring i størrelse blir gjort for å passe innholdet til det overordnede elementet.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down er en verdi som kombinerer oppførselen til none og contain. Hvis innholdet passer til det overordnede elementet, oppfører det seg som none, men hvis innholdet er for stort, brukes oppførselen til contain og skaleres ned for å passe.

  • Innholdet skaleres ned hvis det er større enn det overordnede elementet.
  • Det vises i sin opprinnelige størrelse hvis det er mindre.

Eksempel på bruk

Tilpasning av bakgrunnsbilder til det overordnede elementet

For eksempel, for å spre et bilde over hele skjermen med responsivt design i tankene, er det vanlig å bruke cover. Følgende kode er et eksempel på å passe et bilde tett inn i det overordnede elementet, selv om det blir 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 tilfellet dekker bildet fullstendig det overordnede elementet, og opprettholder en vakker layout på enhver skjermstørrelse. Hvis størrelsesforholdet er annerledes, kan noen deler av bildet ikke være synlige, men det oppnår en presentasjon som passer til designet.

Visning av bilder mens størrelsesforholdet beholdes

Deretter, hvis du vil passe hele bildet inn i det overordnede elementet mens størrelsesforholdet opprettholdes, er contain passende.

 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 eksempelet skaleres bildet ned for å passe containeren, noe som resulterer i litt luft rundt, men det opprinnelige bildet vises uten forvrengning.

Vanlige feil

En vanlig feil ved bruk av object-fit er ikke å angi størrelsen på det overordnede elementet. object-fit er en egenskap for å tilpasse innhold til det overordnede elementet, så hvis størrelsen på det overordnede elementet ikke er klart definert, kan den forventede effekten ikke oppnås. Sørg for at det overordnede elementet har width eller height riktig angitt.

For eksempel, i følgende kode er høyden på det overordnede elementet ikke spesifisert, så object-fit fungerer ikke som tiltenkt.

 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 tilfellet må du angi høyden på det overordnede elementet eller justere hele layouten ved bruk av flexbox eller grid-layout.

Situasjoner der object-fit bør brukes

object-fit er viktig, spesielt i responsivt design og på nettsider som retter seg mot ulike skjermstørrelser. For eksempel er det nyttig i følgende tilfeller:.

  • Når du ønsker å tilpasse bilder eller videoer til å vises korrekt på forskjellige enheter
  • Når du ønsker å vise bakgrunnsbilder eller lignende i fullskjerm samtidig som du tillater beskjæring
  • Når du ønsker å tilpasse et bilde til et overordnet element samtidig som du opprettholder dets sideforhold
  • Når du ønsker å vise bildestørrelser konsekvent, for eksempel i gallerier

Bruk av object-fit i disse situasjonene kan opprettholde konsistens i designet og forbedre brukeropplevelsen.

Sammendrag

object-fit er en kraftig CSS-egenskap som gir deg fleksibilitet til å kontrollere hvordan bilder og videoer vises i forhold til deres overordnede elementer på en nettside. Ved å bruke forskjellige verdier som fill, contain, cover, none og scale-down, kan du oppfylle ulike designkrav. Ved å forstå hvordan du bruker det riktig og anvender det passende, kan du oppnå visuelt tiltalende oppsett.

Egenskapen object-position

CSS-egenskapen object-position brukes til å kontrollere plasseringen av innhold som bilder og videoer innenfor et element. Med object-position kan du plassere innhold på spesifikke punkter og skape visuelle effekter som passer layouten.

Oversikt over object-position

object-position brukes hovedsakelig på medieelementer som <img>- og <video>-tagger. Denne egenskapen kontrollerer hvor i beholderen mediet vises. object-fit brukes ofte i kombinasjon med object-position, hvor object-fit definerer hvordan et bilde eller en video tilpasses ramme-størrelsen, og object-position justerer visningsposisjonen til innholdet.

Hvordan spesifisere verdier

object-position kan angi posisjoner ved å bruke én, to eller fire verdier. Å spesifisere fire verdier er kanskje ikke støttet av eldre nettlesere.

Spesifisering av én verdi

Hvis bare én verdi er spesifisert, tolkes den som den horisontale (X-akse) posisjonen, og den vertikale (Y-akse) settes automatisk til center.

  • Når det er spesifisert som object-position: left;, plasseres objektet til venstre.
  • Når det er spesifisert som object-position: 70%;, plasseres objektet 70% horisontalt og sentreres vertikalt.
  • Når det er spesifisert som object-position: 50px;, plasseres objektet 50px fra venstre og sentreres vertikalt.

Spesifisering av to verdier

Ved å spesifisere to verdier kan du angi horisontal (X-akse) og vertikal (Y-akse) posisjon individuelt.

  • Når det er spesifisert som object-position: center center;, sentreres objektet.
  • Når det er spesifisert som object-position: right top;, plasseres objektet øverst til høyre.
  • Når det er spesifisert som object-position: 75% 20%;, plasseres objektet 75% horisontalt og 20% vertikalt.
  • Når det er spesifisert som object-position: 50px 25px;, plasseres objektet 50px fra venstre og 25px fra toppen.

Spesifisering av fire verdier

Ved å spesifisere fire verdier kan du angi mer detaljert posisjonering ved å bruke nøkkelord som left eller top sammen med deres forskyvninger.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Når det er spesifisert som object-position: left 10px top 20px;, plasseres objektet 10px fra venstre og 20px fra toppen.
  • Når det er spesifisert som object-position: right 15% bottom 30px;, plasseres objektet 15% fra høyre og 30px fra bunnen.
Format for verdi-spesifikasjon

object-position kan godta følgende verdiformater.

  • Du kan spesifisere nøkkelord som top, right, bottom, left og center.
  • Du kan også angi verdier med prosent, som 50%, eller enheter som px.

For eksempel kan du bruke det slik.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Kombinasjon av nøkkelord og prosent

Det er også mulig å blande nøkkelord og prosent.

1img {
2    object-position: right 50%;
3}
  • I dette eksempelet er bildet plassert ved høyre kant og vertikalt sentrert på 50%. Denne kombinasjonen er veldig nyttig når fleksibel posisjonering er nødvendig.

Kombinasjon med object-fit

object-position brukes ofte sammen med object-fit. object-fit bestemmer hvordan et bilde eller en video tilpasses i forhold til rammen sin. For eksempel vil bruk av object-fit: cover beskjære bildet slik at det passer inn i rammen og posisjonerer det i henhold til den angitte object-position.

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • I dette eksempelet sprer bildet seg over hele beholderen, og viser den nederste høyre delen av innholdet.
Eksempler kombinert med object-fit-verdier

Du kan spesifisere følgende verdier for object-fit.

  • fill: Bildet kan bli forvrengt, men det fyller hele beholderen.
  • contain: Hele bildet vises samtidig som aspektforholdet opprettholdes.
  • cover: Beskjæres for å passe beholderen, samtidig som aspektforholdet opprettholdes.
  • none: Bildet vises i sin opprinnelige størrelse.

For eksempel, ved å bruke object-fit: contain vises hele bildet og plasseres i henhold til innstillingen for object-position.

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

Med denne innstillingen plasseres bildet på høyre side av beholderen, og hele bildet vises.

Avansert bruk

object-position kan brukes i ulike scenarier, ikke bare for enkle posisjonsjusteringer, men også for å forbedre visuelle effekter.

Legge vekt på en del av bildet

Det er nyttig når du vil fokusere på en bestemt del av bildet i stedet for å vise hele bildet. Sett object-fit til cover og bruk object-position for å fokusere på et spesifikt område.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • I dette eksempelet vises den nederste venstre delen av bildet, noe som fremhever viktige deler.
Når du bruker en video som bakgrunn

object-position er også nyttig når du bruker en video som bakgrunn. Du kan plassere videoen på et spesifikt sted for å opprettholde designkonsistensen på siden.

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

Vanlige problemer og løsninger

Det kan oppstå noen problemer når du bruker object-position. Her introduserer vi vanlige problemer og deres løsninger.

En del av bildet blir kuttet av

Når du bruker object-fit: cover, kan bildet bli beskjært for å passe til beholderen. I dette tilfellet kan du justere visningsposisjonen med object-position for å sikre at viktige deler vises.

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

Prosentspesifikasjoner er kanskje ikke alltid intuitive. Det er nødvendig å ta hensyn til beholderens størrelse og størrelsesforhold og eksperimentere med ulike verdier. Å bruke utviklerverktøy til å justere i sanntid er effektivt.

Sammendrag

object-position er et kraftig verktøy for å plassere medieelementer fritt. Ved å kombinere det med object-fit kan fleksible oppsett tilpasset designet oppnås. Bli dyktig med nøkkelord, prosentandeler og lengdeenheter for å maksimere visuelle effekter i ulike situasjoner.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

`overflow`- og `contain`-egenskapeneCSS-egenskaper relatert til gjennomsiktighet