CSS object-fit egenskap

Definition och användning

objectFit-egenskapen används för att definiera hur <img> eller <video> ska justeras i storlek för att passa in i behållaren.

Denna egenskap informerar om hur innehållet fyller behållaren. Till exempel "bevara ljud- och bildförhållandet" eller "utöka och använda så mycket utrymme som möjligt".

Se också:

CSS教程:CSS object-fit

CSS Referenshandbok:CSS object-position

HTML DOM Referenshandbok:objectFit-egenskapen

Exempel

Beskär bildens sidor, behåll ljud- och bildförhållandet, och fyll utrymmet:

img.a {
  bredd: 200px;
  höjd: 400px;
  object-fit: cover;
}

Prova själv

CSS-syntax

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Egenskapsvärde

Värde Beskrivning
fill Standardvärde. Justera storleken på det ersättande innehållet för att fylla elementets innehållsram. Om nödvändigt kommer objektet att sträckas eller komprimeras.
contain Skala innehållet för att behålla ljud- och bildförhållandet, samtidigt som det passar in i elementets innehållsram.
cover Justera storleken på det ersättande innehållet för att hålla ljud- och bildförhållandet när det fyller hela innehållsramen. Objektet kommer att beskäras.
none Innehållet justeras inte i storlek.
scale-down Innehållets storlek är densamma som none eller contain, beroende på vilken av dem som får det minsta objektstorleken.
initial Sätt denna egenskap till dess standardvärde. Se vidare initial.
inherit Följer från föräldrelementet för denna egenskap. Se vidare inherit.

Tekniska detaljer

Standardvärde: Se enskilda egenskaper.
Ärvnad: Nej
Animering: Stöds inte. Se vidare:Animationsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.objectFit="cover"

Webbläsarstöd

Talen i tabellen anger den första webbläsare som helt stöder egenskapen.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0