Vi vet at bilder spiller en avgjørende rolle på en nettside. De bidrar til å presentere innholdet effektivt og tydelig. Noen ganger kan innholdsbilder ha en størrelse som enten er større eller mindre enn beholderen de skal vises i, eller bildeforholdet kan være forskjellig fra beholderens. Vi skal se på hvordan man kan vise et bilde på best mulig måte.

object-fit

object-fit angir hvordan et bilde skal tilpasses størrelsen på beholderen.

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

• fill strekker bildet for å fylle beholderen, uavhengig av bildeforhold. Dette kan føre til at bildet blir beskåret eller forvrengt;
• contain skalerer bildet slik at det passer i beholderen og beholder bildeforholdet. Dette kan føre til tomrom rundt bildet hvis bildeforholdet til bildet og beholderen er forskjellig;
• cover skalerer bildet slik at det dekker hele beholderen og beholder bildeforholdet;
• none viser bildet i sin opprinnelige størrelse, uavhengig av størrelsen på beholderen. Dette kan føre til at bildet går utenfor beholderen;
• scale-down skalerer bildet ned for å passe i beholderen hvis det er større enn bildets naturlige størrelse, eller viser bildet i naturlig størrelse hvis det passer i beholderen.

object-position

object-position angir plasseringen av bildet inne i beholderen. Den aksepterer to verdier: en horisontal verdi og en vertikal verdi, eller vi kan bruke reserverte ord.

object-position: x y;