Afbeeldingen vullend maken met CSS

Geschreven door: op zondag 28 juni 2020

Leestijd:

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 hier meer over hoe we jou hierbij kunnen helpen.

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten