Hur man skapar: responsiva bilder
- Föregående sida Profilbild
- Nästa sida Centrerad bild
Lär dig hur man använder CSS för att skapa responsiva bilder.
Responsiva bilder justeras automatiskt för att anpassa sig till skärmstorleken.
Justera webbläsarfönstret för att se responsiva effekter:

Hur man skapar responsiva bilder
Steg 1 - Lägg till HTML:
<img src="nature.jpg" alt="Nature" class="responsive">
Steg 2 - Lägg till CSS:
Om du vill att bilden ska kunna både förstora och minskas responsivt, sätt CSS: width
egenskapen sätts till 100%
,height
sätt till auto
:
Exempel
.responsive { width: 100%; height: auto; }
Om du vill att bilden ska kunna minskas vid behov, men aldrig förstora till en storlek större än originalstorleken, använd max-width: 100%
:
Exempel
.responsive { max-width: 100%; height: auto; }
Om du vill begränsa responsiva bilder till en maximal storlek, använd max-width
Egenskaper samt de pixelvärden du väljer:
Exempel
.responsive { width: 100%; max-width: 400px; height: auto; }
Relevanta sidor
Tutorial:CSS-image
Tutorial:CSS-responsiv webbdesign
- Föregående sida Profilbild
- Nästa sida Centrerad bild