Sådan strækker du et billede vandret med CSS

En måde at indånde nyt digitalt liv i et billede er at ændre bredden. Du kan gøre det ved hjælp af et billedredaktør, men CSS kan ofte få jobbet gjort hurtigere. Lær hvordan du tilføjer en CSS-reference til et billede, og du kan strække det vandret til enhver bredde, du kan lide. Cascading Style Sheets giver dig mulighed for hurtigt at prøve nye udseende til dine virksomhedswebsider, da du kan anvende dem på elementer i hele dit websted med det samme, uden at bruge nogle få linjer med simpel kode.

1.

Åbn et HTML-dokument, der har et billede, og find dokumentets afsnit. Indsæt koden som vist nedenfor i dette afsnit.

Denne kode opretter en CSS klasse kaldet stretchX. Breddeparameterens værdi, 400px, fortæller browsere at lave et element, der refererer til klassen 400 pixel bredt. Det skaber også en klasse med navnet stretchXY, der har bredde- og højdeværdier.

2.

Flyt til dit dokuments afsnit og find en img-tag, der definerer et billede. Det vil se ud som vist nedenfor:

4.

Gem dit dokument og se det i en browser. Billedets bredde bliver 400 pixel bredt, fordi det er den værdi, der er defineret i stretchX CSS-klassen. Gå tilbage til dit dokument og skift 400 til en anden værdi for at gøre billedet strækket til den pågældende bredde.

Tips

  • Du kan også erstatte 200px med en procentværdi som f.eks. 300% i CSS-klassen. Dette giver dig mulighed for at strække et billede med en procent i stedet for med et pixelbeløb.
  • Hvis din img-tag allerede indeholder en klassereference, skal du tilføje dit klassenavn efter det eksisterende klassenavn, der vises i attributdefinitionen. For eksempel, hvis den aktuelle img-tag begynder med
  • Udskift img-tagets reference til "stretchX" med "stretchXY", hvis du vil ændre billedets bredde og højde. Hvis du gør dette, skal du justere bredden og højden i stretchXY-klassen for at opnå den ønskede billedbredde og højde på din webside.
  • Eksperiment med billedstrækning på firmalogoer eller andre billeder, der indeholder tekst. Du kan opdage et nyt tiltalende udseende, der fungerer bedre end den eksisterende.
  • Når du øger et billeds dimensioner ved hjælp af CSS, falder billedets kvalitet. Det kan ikke mærkes med små stigninger, men det kan blive et problem, hvis du gør dine billeder for store. Undersøg dine forstørrede billeder omhyggeligt, før de placeres på nettet.