Afbeeldingen vullend maken met CSS

Gepubliceerd op 28 juni 2020 Leestijd : 3 minuten

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

De eerste, en meest makkelijke manier om een afbeelding te vullen in een vlak is door de css-eigenschap object-ft: cover te gebruiken. In CSS ziet dit er zo uit:

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

Deze methode werkt in vrijwel elke browser. Dat ziet er in je CSS bestand er zo uit:

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

Deze methode werkt in oudere browsers. Je maakt dan gebruik van een achtergrondafbeelding. Je CSS ziet er dan zo uit:

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.

Hopelijk begrijp je nu beter hoe je afbeeldingen in CSS vullend kunt tonen. Heb jij hulp nodig om de vormgeving en content van jouw B2B website te verbeteren? Lees meer over onze diensten op het gebied van design.