Afbeeldingen vullend maken met CSS

Geschreven door: op zondag 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 hier meer over hoe we jou hierbij kunnen helpen.

Andere blogartikelen

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
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
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

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