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, riippumatta sen kuvasuhteesta. Tämä voi johtaa kuvan leikkautumiseen tai vääristymiseen;
• contain skaalaa kuvan sopimaan säiliöön säilyttäen sen kuvasuhteen. Tämä voi aiheuttaa tyhjää tilaa kuvan ympärille, jos säiliön ja kuvan kuvasuhteet eroavat toisistaan;
• cover skaalaa kuvan peittämään koko säiliön säilyttäen sen kuvasuhteen;
• none näyttää kuvan alkuperäisessä koossaan, riippumatta säiliön koosta. Tämä voi johtaa kuvan ylittymiseen säiliön ulkopuolelle;
• scale-down pienentää kuvan sopimaan säiliöön, jos se on suurempi kuin kuvan luonnollinen koko, tai näyttää kuvan luonnollisessa koossaan, jos se mahtuu säiliöön.

object-position

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

object-position: x y;