CSS object-fit-attributet

CSS object-fit Attributet används för att specificera hur storleken på <img> eller <video> ska justeras för att passa dess behållare.

Webbläsarstöd

Talen i tabellen anger den första webbläsarens version som helt stöder detta attribut.

Attribut Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit-attributet

CSS object-fit Används för att specificera hur storleken på <img> eller <video> ska justeras för att passa dess behållare.

Denna egenskap berättar hur innehållet ska fylla behållaren på olika sätt. Till exempel "bevara förhållandet mellan bredd och höjd" eller "utöka och använda så mycket utrymme som möjligt".

Se på följande tulpanbild från Shanghai Flower Port, som är 300x300 pixlar:

Tulip

Men om vi sätter in bilden till 200x300 pixlar, kommer den att se ut så här:

Tulip

Example

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

Try it yourself

Vi ser att bilden komprimeras för att passa en behållare på 200x300 pixlar, och det ursprungliga förhållandet mellan bredd och höjd förstörs.

Om vi använder object-fit: cover;Det kommer att klippa sidorna på bilden, behålla förhållandet mellan bredd och höjd och fylla utrymmet på följande sätt:

Kaffe

Example

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

Try it yourself

En annan exempel

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

I följande exempel använder vi inte object-fitDärför förstörs bildens förhållande mellan bredd och höjd när vi justerar storleken på webbläsarfönstret:

Example

Try it yourself

I nästa exempel använder vi object-fit: cover;Därför bevaras bildens förhållande mellan bredd och höjd när vi justerar storleken på webbläsarfönstret:

Example

Try it yourself

Alla värden för CSS object-fit-attributet

object-fit Egenskapen accepterar följande värden:

  • fill - Standardvärde. Justera storleken på det ersättade innehållet för att fylla elementets innehållsram. Om nödvändigt, sträcka eller komprimera objektet för att anpassa till detta objekt.
  • contain - Skala det ersättade innehållet för att behålla förhållandet mellan bredd och höjd, samtidigt som det placeras i elementets innehållsram.
  • cover - Justera storleken på det ersättade innehållet för att behålla förhållandet mellan bredd och höjd när det fyller hela innehållsramen för det fyllnadsobjektet. Objektet kommer att beskäras för att passa.
  • none - Do not adjust the size of the replacement content.
  • scale-down - Adjust the size of the content as if no content or contained content has been specified (which will result in a smaller specific object size)

The following examples demonstrate object-fit All possible values of the property:

Example

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

Try it yourself