`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</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<div class="background-image-cover">
60 <img src="example.jpg" alt="Example Image">
61</div>
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<div class="background-image-contain">
85 <img src="example.jpg" alt="Example Image">
86</div>
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<div class="background-image-invalid">
114 <img src="example.jpg" alt="Example Image">
115</div>
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>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: 500px; 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.
Bemästra användningen av object-fit för att skapa responsiva och estetiskt tilltalande designer.
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.
1img {
2 object-fit: cover;
3 object-position: center;
4}- I detta exempel skalas bilden för att passa behållaren (
object-fit: cover) och placeras så att dess centrum visas (object-position: center).
Hur man anger värden
object-position anges med två värden enligt följande.
- Horisontell position (X-axel)
- Vertikal position (Y-axel)
Specifikationsformat för värden
I object-position kan du ange värden i följande format.
- Nyckelord:
upp,höger,ner,vänster,center - Procent:
0%till100% - Längdenheter:
px,em,rem, etc.
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: bottom right;
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
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.
1img {
2 object-fit: contain;
3 object-position: top;
4}I den här inställningen placeras bilden högst upp i 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.