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,
  • 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS blend

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

Image-rendering

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

CSS mask

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

Background-clip

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

Border-image

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

Komentáře