Ibland är det viktigt att använda bilder som ändrar sig på ett dynamiskt sätt till fönstrets storlek. Dynamiska bilder passar bra i situationer där individer använder olika enheter och vill visa olika bilder beroende på enhet eller skärmstorlek (mobilenhet v. dataskärm). När skärmstorleken ändras ska bilden som visas ändras ut till någonting annat.

Använd HTML-koden som finns nedan för att skapa en situation där sidan faktiskt innehåller två bilder som klassificeras som dynamiska bilder. Du behöver byta ut filnamnet (den som är markerat i lilla & blå i koden och länka istället till dina val till bilder.

HTML-Kod:

Source media används för att tala om för sidan att det finns bilder som ska visas vid olika sidoinställningar (bredden i exemplet).

srcset är länkningen till filerna som ska visas upp utifrån source media inställningar. Här är det möjligt att välja mellan olika filer från fil-sidan i kursen.

Resten av koden visas den vanliga inbäddningskod av filen som ska visas upp vanligtvis. I exemplet ser vi att filen är 6931 - julgranen.

Nedan ser du effekten av koden om du nu ändra webbläsarens fönsterstorlek från "jättestor" till "pytteliten".

julkula