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

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

Bli flink til å bruke object-fit for å skape responsive og estetisk tiltalende design.

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.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • I dette eksemplet er bildet skalert for å passe inn i beholderen (object-fit: cover), og er plassert slik at midten vises (object-position: center).

Hvordan spesifisere verdier

object-position spesifiseres med to verdier som følger.

  • Horisontal posisjon (X-akse)
  • Vertikal posisjon (Y-akse)
Format for verdi-spesifikasjon

I object-position kan du spesifisere verdier i følgende format.

  • Nøkkelord: top, right, bottom, left, center
  • Prosent: 0% til 100%
  • Lengdeenheter: px, em, rem, osv.

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: bottom right;
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
  • 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.
1img {
2    object-fit: contain;
3    object-position: top;
4}

I denne innstillingen plasseres bildet øverst i 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`-egenskapene