Hur man skapar: responsiva bilder

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:

Ljuset

Se effekten

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;
}

Prova det själv

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;
}

Prova det själv

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;
}

Prova det själv

Relevanta sidor

Tutorial:CSS-image

Tutorial:CSS-responsiv webbdesign