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

Nastavit 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

Nastavit 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

Nastavit 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

Nastavit 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

Nastavit 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,
• Edge 16 (pouze na značce <img>)
• Opera 12 s prefixem -o- (nefunguje úplně korektně)

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

Funkcionalitu object-fit lze s dobrou podporou v prohlížečích suplovat nahrazením <img> obrázku za CSS pozadí a background-size.

<style>
.obrazek {
  display: block;
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
}
</style>
<div class="obrazek" style="background-image: url(obrazek.jpg)"></div>

Živá ukázka

Odkazy jinam

• CSS Tricks: A Quick Overview of `object-fit` and `object-position`