O webu
Object-fit

Pokud na stránce má být něco jako mřížka z obrázků a obrázky jsou různě velké, vlastnost object-fit přináší jednoduché a elegantní řešení.

Bez object-fit si je někdy možné vystačit s nastavení pouze jednoho rozměru (šířky nebo výšky) s tím, že druhý se dopočítá – tak je možné alespoň zachovat poměr stran.

Živá ukázka

Pokud by se nastavil pevný rozměr pro každý obrázek, deformace by byla značná:

Živá ukázka

Vlastnost object-fit

CSS vlastnost object-fit má několik hodnot – jsou hodně podobné jako background-size.

Za <img> obrázkem může prosvítat jeho pozadí nastavené standardně přes:

img {background: barva}
object-fit: fill

Obrázek se roztáhne (a případně zdeformuje) dle zadaných rozměrů. Jako při prostém nastavení width a height.

object-fit: contain

Obrázek si zachová poměr stran a roztáhne se tak, aby byl alespoň přes celou jednu stranu. Může se tedy zmenšit i zvětšit.

object-fit: scale-down

Chová se hodně podobně jako contain – zachovává poměr stran, ale nezvětšuje obrázek nad jeho skutečné rozměry.

object-fit: cover

Asi nejzajímavější hodnota. Přizpůsobí obrázek tak, že bude vyplněn celý prostor. Bude tedy zvětšen nebo zmenšen Kromě toho je obrázek zarovnán na střed.

object-fit: none

Podobné chování jako cover, jen obrázek zůstane v původní velikosti.

Samostatná živá ukázka s použitím object-fit: contain

Podpora v prohlížečích

  • Chrome 31,
  • Firefox 36,
  • Safari 7.1,
  • Opera 12 s prefixem -o- (nefunguje úplně korektně)

Pro starší prohlížeče existuje polyfill, ale je poměrně datově velký.

Odkazy jinam