Vi vet at bilder spiller en avgjørende rolle på en nettside. Det 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, uten å ta hensyn til bildeforhold (kan forvrenge bildet);
• contain: skalerer bildet slik at det passer innenfor beholderen og beholder bildeforholdet (kan gi tomrom);
• cover: fyller beholderen helt og beholder bildeforholdet (kan beskjære bildet);
• none: bruker bildets opprinnelige størrelse; kan føre til at bildet går utenfor beholderen;
• scale-down: bruker den minste av none eller contain (enten opprinnelig størrelse eller skalert ned for å passe).

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;