Afbeeldingen vullend maken met CSS
Soms willen we in een site een afbeelding vullend tonen, omdat we niet van te voren weten hoe groot het vlak is waarin de afbeelding wordt getoond. Dit komt meestal voor omdat we niet weten hoe breed het scherm is van de gebruiker. In dit artikel kun je lezen hoe je dat kunt doen. We gebruiken voor elk voorbeeld hiervoor de volgende HTML:
<figure>
<img src=ā/img/jouw-afbeelding.jpgā alt=āeen afbeelding van mijā title=āmijn afbeeldingā />
</figure>
Methode 1: object-fit
figure {
height: 300px;
width: 300px;
}
figure img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
Dit vult de afbeelding organisch binnen de opgestelde afmetingen. Het nadeel van deze methode is dat veel oudere browsers, zoals Internet Explorer 11 en oudere versies van Safari dit niet ondersteunen. Als er veel bezoekers deze browsers gebruiken, dan heb je de keuze om een uitzondering te maken, of de afbeeldingen op een andere manier te vullen.
Methode 2: absoluut centreren
figure {
height: 300px;
width: 300px;
position: relative;
overflow: hidden;
}
figure img {
display: block;
height: 100%;
width: auto
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
De afbeelding is in de hoogte dan altijd 100% hoog, maar in de breedte wordt deze afgesneden. Je kunt er ook voor kiezen de breedte op 100% te zetten en de hoogte op automatisch. In ieder geval moet je hierin een keuze maken. Daarom werkt deze methode niet optimaal; je moet rekening houden met de verhoudingen van het afbeeldingsformaat.
Methode 3: background-image
figure {
height: 300px;
width: 300px;
background-image: url(/img/jouw-afbeelding.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
figure img {
display: none;
}
Je zult de background-image moeten instellen met Javascript die de URL van de afbeelding uitleest en in de styling zet. Het grote nadeel van deze methode is dat je een deel van de inhoud van de site naar het CSS-bestand verplaatst. Dit zorgt voor slechtere bewerkbaarheid, en gaat tegen de principes in van de scheiding van inhoud (HTML), vormgeving (CSS) en gedrag (Javascript). Ik raad daarom af om deze methode te gebruiken.