Hoe - Responsieve afbeeldingen
Leer hoe u een responsieve afbeelding maakt met CSS.
Responsieve afbeeldingen worden automatisch aangepast aan de grootte van het scherm.
Pas het formaat van het browservenster aan om het responsieve effect te zien:
Responsieve afbeeldingen maken
Stap 1) HTML toevoegen:
Voorbeeld
<img src="nature.jpg" alt="Nature" class="responsive">
Stap 2) CSS toevoegen:
Als u wilt dat de afbeelding zowel omhoog als omlaag wordt geschaald voor responsiviteit, stelt u de CSS - width
eigenschap in op 100% en height
op automatisch:
Voorbeeld
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.