Afbeeldingen vullend maken met CSS header image

Afbeeldingen vullend maken met CSS

zondag 28 juni 2020 ·Leestijd: 3 minuten
contacteer auteur:

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.

Andere blogartikelen

Integraties met API's van verschillende partijen
Geschreven door
op donderdag 30 juni 2022
Bij Sigma Solutions maken wij integraties met verschillende partijen, die ervoor zorgen dat jouw bedrijfsproces geautomatiseerd en gedigitaliseerd kan worden. We zijn constant op zoek naar passende oplossingen voor onze klanten.
Wat is B2B Online Advertising?
Geschreven door
op donderdag 30 juni 2022
B2B Online Advertising is een marketingstrategie die bedoeld is om een zakelijke boodschap over te brengen aan andere bedrijven door middel van advertenties.
Als traditioneel bedrijf succesvol blijven in een tijdperk van digitalisering
Geschreven door
op donderdag 30 juni 2022
Wil je als traditioneel bedrijf succesvol blijven in een tijdperk van 'digital natives'? Lees dan deze blogpost!
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book ›