Hoe te maken: responsieve afbeelding

Leer hoe je responsieve afbeeldingen kunt maken met CSS.

De responsieve afbeelding past zich automatisch aan aan het schermformaat aan.

Pass op het browservensterformaat aan om het responsieve effect te bekijken:

Lights

Bekijk het effect

Hoe een responsieve afbeelding te maken

Eerste stap - Voeg HTML toe:

<img src="nature.jpg" alt="Nature" class="responsive">

Tweede stap - Voeg CSS toe:

Als u wilt dat de responsieve capaciteit van de afbeelding zowel kan worden vergroot als verkleind, stel dan de CSS width Eigenschap instellen als 100%,height Instellen van auto:

Voorbeeld

.responsive {
  width: 100%;
  height: auto;
}

Probeer het zelf

Als u wilt dat de afbeelding indien nodig kan worden verkleind, maar nooit wordt vergroot tot groter dan de oorspronkelijke grootte, gebruik dan max-width: 100%:

Voorbeeld

.responsive {
  max-width: 100%;
  height: auto;
}

Probeer het zelf

Als u de responsieve afbeelding wilt beperken tot een maximale grootte, gebruik dan max-width Eigenschappen en de door u gekozen pixelwaarden:

Voorbeeld

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Probeer het zelf

Relevante pagina

Handleiding:CSS afbeelding

Handleiding:CSS responsief webontwerp