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-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:
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:
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
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:
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>
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:
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>
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:
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>
Om vi använder object-fit: none;
ändras inte bildens storlek:
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>
Om vi använder object-fit: scale-down;
skalas bilden ned till den minsta versionen av ingen
eller innehålla
:
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>
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:
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:
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>
Följande exempel visar alla möjliga värden för egenskapen object-fit
i ett 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>
Följande tabell listar egenskaperna för CSS-objekt-*:
Anger hur en <img> eller <video> ska storleksändras för att passa dess behållare
Anger hur en <img> eller <video> ska placeras med x/y koordinater i sin "eget innehållsruta"