Tiedämme, että kuvat ovat keskeisessä roolissa verkkosivulla. Ne auttavat esittämään sisällön tehokkaasti ja selkeästi. Joskus sisältökuvan koko voi olla joko suurempi tai pienempi kuin sen säiliö, johon se on tarkoitus sijoittaa, tai sen kuvasuhde voi poiketa säiliön kuvasuhteesta. Tarkastelemme, miten kuva voidaan esittää parhaalla mahdollisella tavalla.

object-fit

object-fit määrittää, miten kuva skaalataan sopimaan säiliöönsä.

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

• fill: venyttää kuvan täyttämään säiliön, ei huomioi kuvasuhdetta (voi vääristää);
• contain: skaalaa kuvan mahtumaan säiliöön säilyttäen kuvasuhteen (voi jättää tyhjää tilaa);
• cover: täyttää säiliön kokonaan säilyttäen kuvasuhteen (voi rajata kuvaa);
• none: käyttää kuvan alkuperäistä kokoa; voi ylittää säiliön rajat;
• scale-down: käyttää pienempää vaihtoehtoa none tai contain (joko alkuperäinen koko tai pienennetty sopimaan).

object-position

object-position määrittää kuvan sijainnin sen säiliössä. Se hyväksyy kaksi arvoa: vaaka-arvon ja pysty-arvon, tai voidaan käyttää varattuja sanoja.

object-position: x y;