Responsief webdesign - afbeeldingen
Pas het formaat van het browservenster aan om te zien hoe de afbeelding wordt geschaald om op de pagina te passen.
De eigenschap width gebruiken
Als de widtheigenschap is ingesteld op een percentage en de heighteigenschap is ingesteld op 'auto', reageert de afbeelding en wordt deze omhoog en omlaag geschaald:
Voorbeeld
img {
width: 100%;
height: auto;
}
Merk op dat in het bovenstaande voorbeeld de afbeelding kan worden vergroot om groter te zijn dan de oorspronkelijke grootte. Een betere oplossing zal in veel gevallen zijn om in plaats daarvan het
max-widthonroerend goed te gebruiken.
De eigenschap max-width gebruiken
Als de max-widtheigenschap is ingesteld op 100%, wordt de afbeelding zo nodig verkleind, maar nooit groter geschaald dan de oorspronkelijke grootte:
Voorbeeld
img {
max-width: 100%;
height: auto;
}
Voeg een afbeelding toe aan de voorbeeldwebpagina
Voorbeeld
img {
width: 100%;
height: auto;
}
Achtergrondafbeeldingen
Achtergrondafbeeldingen kunnen ook reageren op het vergroten of verkleinen en schalen.
Hier laten we drie verschillende methoden zien:
1. Als de background-sizeeigenschap is ingesteld op "bevatten", wordt de achtergrondafbeelding geschaald en wordt geprobeerd in het inhoudsgebied te passen. De afbeelding behoudt echter de hoogte-breedteverhouding (de proportionele relatie tussen de breedte en hoogte van de afbeelding):
Hier is de CSS-code:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Als de background-sizeeigenschap is ingesteld op "100% 100%", wordt de achtergrondafbeelding uitgerekt om het volledige inhoudsgebied te bestrijken:
Hier is de CSS-code:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Als de background-sizeeigenschap is ingesteld op "bedekken", wordt de achtergrondafbeelding geschaald om het volledige inhoudsgebied te beslaan. Merk op dat de "cover"-waarde de hoogte-breedteverhouding behoudt en dat een deel van de achtergrondafbeelding kan worden afgekapt:
Hier is de CSS-code:
Voorbeeld
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Verschillende afbeeldingen voor verschillende apparaten
Een grote afbeelding kan perfect zijn op een groot computerscherm, maar nutteloos op een klein apparaat. Waarom een grote afbeelding laden als je deze toch moet verkleinen? Om de belasting te verminderen, of om andere redenen, kunt u mediaquery's gebruiken om verschillende afbeeldingen op verschillende apparaten weer te geven.
Hier is een grote afbeelding en een kleinere afbeelding die op verschillende apparaten wordt weergegeven:
Voorbeeld
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
U kunt de mediaquery gebruiken min-device-widthin plaats van min-width, waarmee de apparaatbreedte wordt gecontroleerd, in plaats van de browserbreedte. Dan verandert de afbeelding niet als je het browservenster vergroot of verkleint:
Voorbeeld
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Het HTML <plaatje>-element
Het HTML <picture>-element geeft webontwikkelaars meer flexibiliteit bij het specificeren van afbeeldingsbronnen.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.