CSS-objekttilpasningsegenskab

Indholdsfortegnelse

CSS-egenskaben object-fit bruges til at angive, hvordan en <img> eller <video> skal ændres, så de passer til dens beholder.

CSS-objekttilpasningsegenskaben

CSS-egenskaben object-fit bruges til at angive, hvordan en <img> eller <video> skal skal tilpasses til dens beholder.

Denne egenskab fortæller, at indholdet skal fylde beholderen på en række forskellige måder; såsom "bevar det billedformat" eller "stræk op og optag så meget plads som muligt".

Se på følgende billede fra Paris. Dette billede er 400 pixels bredt og 300 pixels højt:

Men hvis vi stiler billedet ovenfor til at være halvdelen af dets bredde (200 pixels) og samme højde (300 pixels), vil det se sådan ud:

Eksempel

img {
  width: 200px;
  height: 
  300px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:300px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Vi ser, at billedet bliver klemt, så det passer til beholderen med 200x300 pixels (dets oprindelige billedformat er ødelagt).

Det er her object-fit-egenskaben kommer in. Egenskaben object-fit kan tage en af følgende værdier:

udfyld - Dette er standard. Billedets størrelse ændres til at fylde givet dimension. Hvis det er nødvendigt, vil billedet blive strakt eller klemt for at passe
contain - Billedet beholder sit billedformat, men størrelsen ændres til at passe inden for den givne dimension
omslag - Billedet beholder sit billedformat og udfylder den givne dimension. Billedet vil blive klippet, så det passer
ingen - Billedets størrelse er ikke ændret
nedskalering - billedet er nedskaleret til den mindste version af ingen eller indeholde

Brug af objekttilpasning: cover;

Hvis vi bruger object-fit: cover; beholder billedet sit billedformat og udfylder den givne dimension. Billedet vil blive klippet, så det passer til:

Eksempel

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Brug af objekttilpasning: indeholde;

Hvis vi bruger object-fit: contain; beholder billedet sit billedformat, men størrelsen ændres til at passe inden for den givne dimension:

Eksempel

img {
  width: 200px;
  height: 
  300px;
  object-fit: contain;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}
</style>
</head>
<body>

<h2>Using object-fit: contain</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Brug af objekttilpasning: fyld;

Hvis vi bruger object-fit: fill; ændres størrelsen på billedet til at fylde den givne dimension. Om nødvendigt vil billedet blive strakt eller klemt for at passe:

Eksempel

img {
  width: 200px;
  height: 
  300px;
  object-fit: fill;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}
</style>
</head>
<body>

<h2>Using object-fit: fill</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Brug af objekttilpasning: ingen;

Hvis vi bruger object-fit: none; ændres billedet ikke:

Eksempel

img {
  width: 200px;
  height: 
  300px;
  object-fit: none;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: none;
}
</style>
</head>
<body>

<h2>Using object-fit: none</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Brug af objekttilpasning: nedskalering;

Hvis vi bruger object-fit: scale-down; skaleres billedet ned til den mindste version af ingen eller indeholde:

Eksempel

img {
  width: 200px;
  height: 
  300px;
  object-fit: scale-down;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}
</style>
</head>
<body>

<h2>Using object-fit: scale-down</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Et andet eksempel

Her har vi to billeder, og vi vil have dem til at fylde 50 % af browservinduets bredde og 100 % af højden.

I det følgende eksempel bruger vi IKKE object-fit, så når vi ændrer størrelsen på browservinduet, vil billedformatet blive ødelagt:

Eksempel

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>

<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

I det næste eksempel bruger vi object-fit: cover;, så når vi ændrer størrelsen på browservinduet, bevares billedformatet på billederne:

Eksempel

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>

<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

CSS-objekttilpasning Flere eksempler

Det følgende eksempel viser alle de mulige værdier af egenskaben object-fit i et eksempel:

Eksempel

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

CSS Objekt-* Egenskaber

Følgende tabel viser egenskaberne for CSS-objekt-*:

object-fit: Specificerer, hvordan en <img> eller <video> skal ændres, så den passer til dens beholder
object-position: Angiver, hvordan en <img> eller <video> skal placeres med x/y koordinater inde i sin "egen indholdsboks"