CSS-objektpassad egenskap


Innehållsförteckning

    Visa innehållsförteckning


CSS-egenskapen object-fit används för att specificera hur en <img> eller <video> bör storleksändras för att passa dess behållare.


CSS-objektpassningsegenskapen

CSS-egenskapen object-fit används för att specificera hur en <img> eller <video> ska storleksändras för att passa dess behållare.

Den här egenskapen talar om för innehållet att fylla behållaren på en mängd olika sätt; Till exempel "bevara det bildförhållandet" eller "sträck ut dig och ta upp så mycket plats som möjligt möjlig".

Titta på följande bild från Paris. Den här bilden är 400 pixlar bred och 300 pixlar hög:

Paris

Men om vi formaterar bilden ovan så att den är halva dess bredd (200 pixlar) och samma höjd (300 pixlar), kommer den att se ut så här:

Paris

Exempel

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

Prova själv →

<!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 att bilden pressas ihop för att passa behållaren med 200x300 pixlar (dess ursprungliga bildförhållande är förstört).

Det är här egenskapen object-fit kommer in. Egenskapen object-fit kan ta en av följande värden:

  • fyll - Detta är standard. Bildens storlek ändras för att fylla given dimension. Vid behov kommer bilden att sträckas ut eller pressas ihop för att passa

  • contain - Bilden behåller sitt bildförhållande, men storleken ändras för att passa inom den givna dimensionen

  • omslag - Bilden behåller sitt bildförhållande och fyller den givna dimensionen. Bilden kommer att klippas så att den passar

  • ingen - Bildens storlek har inte ändrats

  • nedskalning - bilden är skalas ner till den minsta versionen av ingen eller innehålla


Använda objektpassning: lock;

Om vi använder object-fit: cover; behåller bilden sitt bildförhållande och fyller den givna dimensionen. Bilden kommer att klippas så att den passar:

Paris

Exempel

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

Prova själv →

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




Använda object-fit: contain;

Om vi använder object-fit: contain; behåller bilden sitt bildförhållande, men storleken ändras för att passa inom den givna dimensionen:

Paris

Exempel

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

Prova själv →

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



Använda objektpassning: fill;

Om vi använder object-fit: fill; ändras bildens storlek för att fylla den givna dimensionen. Vid behov kommer bilden att sträckas ut eller pressas ihop för att passa:

Paris

Exempel

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

Prova själv →

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



Använda objektpassning: ingen;

Om vi använder object-fit: none; ändras inte bildens storlek:

Paris

Exempel

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

Prova själv →

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



Använda objektpassning: skala ner;

Om vi använder object-fit: scale-down; skalas bilden ned till den minsta versionen av ingen eller innehålla:

Paris

Exempel

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

Prova själv →

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



Ett annat exempel

Här har vi två bilder och vi vill att de ska fylla bredden på 50 % av webbläsarfönstret och 100 % av höjden.

I följande exempel använder vi INTE object-fit, så när vi ändrar storlek på webbläsarfönstret kommer bildförhållandet att förstöras:

Exempel

Norway Paris

Prova själv →

<!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 nästa exempel använder vi object-fit: cover;, så när vi ändrar storlek på webbläsarfönstret bevaras bildförhållandet:

Exempel

Norway Paris

Prova själv →

<!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-objektpassning Fler exempel

Följande exempel visar alla möjliga värden för egenskapen object-fit i ett exempel:

Exempel

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

Prova själv →

<!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-* egenskaper

Följande tabell listar egenskaperna för CSS-objekt-*:

object-fit

Anger hur en <img> eller <video> ska storleksändras för att passa dess behållare

object-position

Anger hur en <img> eller <video> ska placeras med x/y koordinater i sin "eget innehållsruta"