Articles
Introduktion till CSS
`object-fit`- och `object-position`-egenskaperna

`object-fit`- och `object-position`-egenskaperna

Den här artikeln förklarar object-fit- och object-position-egenskaperna.

Du kan lära dig att arrangera objekt som bilder och videoklipp samt hur du skriver dem i CSS.

YouTube Video

HTML för förhandsgranskning

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>

Relaterat till objektplacering

object-fit-egenskapen

CSS-egenskapen object-fit används främst för att kontrollera hur bilder, videor och annat innehåll passar inom sina behållarelement. Med denna egenskap kan du flexibelt specificera hur de angivna elementen storleksändras och estetiskt positioneras. Den är mycket användbar för att justera bild- eller videovisning genom att trimma eller skala när de inte passar inom det överordnade elementet.

object-fit-värden

fill (standardvärde) 
1img {
2  object-fit: fill;
3}

fill är standardvärdet, där bilder eller videor tvångssträcks för att helt passa in i bredden och höjden på det överordnade elementet. I detta fall ignoreras det ursprungliga bildförhållandet, vilket kan orsaka bildförvrängning.

  • Det passar helt storleken på det överordnade elementet.
  • Eftersom bildförhållandet ignoreras kan bilder eller videor sträckas vertikalt eller horisontellt.
contain 
1img {
2  object-fit: contain;
3}

contain storleksändrar innehållet så att det helt passar inom det överordnade elementet samtidigt som bildförhållandet behålls. Det överskrider inte storleken på det överordnade elementet, och det kan finnas marginaler på den vertikala eller horisontella sidan.

  • Hela innehållet visas.
  • För att behålla det ursprungliga bildförhållandet kan marginaler (letterbox- eller pillarbox-effekt) förekomma.
cover 
1img {
2  object-fit: cover;
3}

cover storleksändrar innehållet så att det helt täcker det överordnade elementet samtidigt som bildförhållandet behålls. En del av innehållet kan beskäras för att passa det överordnade elementet, men hela elementet fyller behållaren, så inga luckor uppstår.

  • Innehållet täcker helt det överordnade elementet.
  • Det kan beskäras samtidigt som det ursprungliga bildförhållandet bibehålls.
  • Vanligtvis används för bakgrundsbilder eller bilder i hjältesektioner.
none 
1img {
2  object-fit: none;
3}

none visar bilder eller videor i deras ursprungliga storlek och bildförhållande. Den anpassar sig inte för att passa föräldraelementets storlek, och innehållet flödar över om det behövs.

  • Innehållets ursprungliga storlek bibehålls.
  • Ingen omstorlekning görs för att passa in innehållet i föräldraelementet.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down är ett värde som kombinerar beteendet för none och contain. Om innehållet passar föräldraelementet beter det sig som none, men om innehållet är för stort tillämpas beteendet för contain och skalas ned för att passa.

  • Innehållet skalas ned om det är större än föräldraelementet.
  • Det visas i sin ursprungliga storlek om det är mindre.

Exempel på användning

Anpassa bakgrundsbilder till föräldraelementet

Till exempel, för att sprida en bild över hela skärmen med responsiv design i åtanke, är det vanligt att använda cover. Följande kod är ett exempel på att passa en bild tätt in i föräldraelementet, även om den beskärs.

 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 detta fall täcker bilden helt föräldraelementet, samtidigt som en vacker layout bibehålls på alla skärmstorlekar. Om bildförhållandet är olika kanske vissa delar av bilden inte är synliga, men det uppnår en presentation som passar designen.

Visa bilder samtidigt som bildförhållandet bibehålls

Nästa, om du vill passa in hela bilden i föräldraelementet samtidigt som dess bildförhållande bibehålls, är contain lämpligt.

 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 detta exempel skalas bilden ned för att passa behållaren, vilket resulterar i lite avstånd, men den ursprungliga bilden visas utan förvrängning.

Vanliga misstag

Ett vanligt misstag vid användning av object-fit är att inte ställa in föräldraelementets storlek. object-fit är en egenskap för att anpassa innehållet till föräldraelementet, så om storleken på föräldraelementet inte är tydlig kan den förväntade effekten inte uppnås. Se till att föräldraelementet har width eller height korrekt inställt.

Till exempel, i följande kod är föräldraelementets höjd inte specificerad, så object-fit fungerar inte som avsett.

 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 detta fall behöver du specificera föräldraelementets höjd eller justera hela layouten med hjälp av flexbox eller rutnätslayout.

Situationer där object-fit bör användas

object-fit är viktigt, särskilt i responsiv design och på webbplatser som anpassar sig till olika skärmstorlekar. Till exempel är det användbart i följande fall:.

  • När du vill anpassa bilder eller videor så att de visas korrekt på olika enheter
  • När du vill visa bakgrundsbilder eller liknande i helskärm samtidigt som beskärning tillåts
  • När du vill passa in en bild i ett överordnat element och samtidigt bevara dess bildförhållande
  • När du vill visa bildstorlekar konsekvent, till exempel i gallerier

Att använda object-fit i dessa situationer kan bibehålla designens konsekvens och förbättra användarupplevelsen.

Sammanfattning

object-fit är en kraftfull CSS-egenskap som gör det möjligt att flexibelt styra hur bilder och videor visas i förhållande till sina överordnade element på en webbsida. Genom att använda olika värden som fill, contain, cover, none och scale-down kan du uppfylla olika designkrav. Genom att förstå hur du använder det korrekt och tillämpar det på rätt sätt kan du skapa visuellt tilltalande layouter.

Egenskapen object-position

CSS-egenskapen object-position används för att styra positioneringen av innehåll såsom bilder och videor inom ett element. Med object-position kan du placera innehållet på specifika punkter och ge visuella effekter som passar layouten.

Översikt av object-position

object-position tillämpas främst på mediaelement som <img>-taggar och <video>-taggar. Denna egenskap styr var i sin behållare medieinnehållet visas. object-fit används ofta i kombination med object-position, där object-fit bestämmer hur en bild eller video anpassas till rambredden, och object-position justerar innehållets visningsposition.

Hur man anger värden

object-position kan ange positioner med ett, två eller fyra värden. Att ange fyra värden kan dock inte stödjas av äldre webbläsare.

Ange ett värde

Om endast ett värde anges tolkas det som den horisontella (X-axeln) positionen och den vertikala (Y-axeln) sätts automatiskt till center.

  • Om object-position: left; anges placeras objektet till vänster.
  • Om object-position: 70%; anges placeras objektet 70% horisontellt och centrerat vertikalt.
  • Om object-position: 50px; anges placeras objektet 50px från vänster och centrerat vertikalt.

Ange två värden

Genom att ange två värden kan du ställa in horisontell (X-axel) och vertikal (Y-axel) position individuellt.

  • Om object-position: center center; anges placeras objektet i mitten.
  • Om object-position: right top; anges placeras objektet högst upp till höger.
  • Om object-position: 75% 20%; anges placeras objektet 75% horisontellt och 20% vertikalt.
  • Om object-position: 50px 25px; anges placeras objektet 50px från vänster och 25px från toppen.

Ange fyra värden

Genom att ange fyra värden kan du ge mer detaljerad positionering med hjälp av nyckelord som left eller top tillsammans med deras förskjutningar.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Om object-position: left 10px top 20px; anges placeras objektet 10px från vänster och 20px från toppen.
  • Om object-position: right 15% bottom 30px; anges placeras objektet 15% från höger och 30px från botten.
Specifikationsformat för värden

object-position kan acceptera följande värdeformat.

  • Du kan ange nyckelord som top, right, bottom, left och center.
  • Du kan också ange värden med procent, t.ex. 50% eller enheter som px.

Till exempel kan du använda det så här.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Kombination av nyckelord och procent

Det är också möjligt att blanda nyckelord och procent.

1img {
2    object-position: right 50%;
3}
  • I det här exemplet placeras bilden vid högerkanten och vertikalt centrerad vid 50%. Denna kombination är mycket användbar när flexibel positionering behövs.

Kombination med object-fit

object-position används ofta tillsammans med object-fit. object-fit avgör hur en bild eller video ändrar storlek i förhållande till dess ram. Till exempel beskär object-fit: cover bilden för att passa ramen och placerar den enligt den angivna object-position.

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • I det här exemplet sprider sig bilden över hela behållaren och visar den nedre högra delen av innehållet.
Exempel kombinerade med object-fit-värden

Du kan ange följande värden för object-fit.

  • fill: Bilden kan bli förvrängd, men den passar hela behållaren.
  • contain: Hela bilden visas medan bildförhållandet behålls.
  • cover: Beskärs för att passa behållaren, medan bildförhållandet behålls.
  • none: Bilden visas i sin ursprungliga storlek.

Till exempel, genom att använda object-fit: contain visas hela bilden och den positioneras enligt inställningen för object-position.

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

Med denna inställning placeras bilden på högra sidan av behållaren och hela bilden visas.

Avancerad användning

object-position kan användas i olika scenarion, inte bara för enkla positioneringsjusteringar utan även för att förbättra visuella effekter.

Betona en del av bilden

Det är användbart när du vill fokusera på en specifik del av bilden istället för att visa hela bilden. Ställ in object-fit på cover och använd object-position för att fokusera på ett specifikt område.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • I det här exemplet visas den nedre vänstra delen av bilden och betonar viktiga delar.
När du använder en video som bakgrund

object-position är också användbar när du använder en video som bakgrund. Du kan placera videon på en specifik plats för att bibehålla en enhetlig design på sidan.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • I denna inställning täcker videon hela sidan och placeras i mitten upptill.

Vanliga problem och lösningar

Det kan uppstå några problem när du använder object-position. Här introducerar vi vanliga problem och deras lösningar.

En del av bilden är avskuren

När du använder object-fit: cover kan bilden beskäras för att passa behållaren. I det här fallet, genom att justera visningspositionen med object-position, kan du säkerställa att viktiga delar visas.

1img {
2    object-fit: cover;
3    object-position: center;
4}
Bildens position är inte som förväntat

Procentspecifikationer kan ibland vara svårtolkade. Det är nödvändigt att ta hänsyn till behållarens storlek och bildförhållande samt experimentera med olika värden. Att använda utvecklarverktyg för att justera i realtid är effektivt.

Sammanfattning

object-position är ett kraftfullt verktyg för att fritt placera mediaelement. Genom att kombinera det med object-fit kan flexibla layouter anpassade efter designen uppnås. Behärska nyckelord, procenttal och längdenheter för att maximera visuella effekter i olika situationer.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

`overflow` och `contain` EgenskaperCSS-egenskaper relaterade till transparens