Fotogalerij — vaste beeldverhouding met aspect-ratio

Leerdoelen

• Je maakt een eenvoudige fotogalerij met 2 rijen × 3 kolommen.
• Je zorgt ervoor dat alle tegels even hoog en even breed zijn.
• Je gebruikt aspect-ratio om de beeldverhouding vast te zetten.
• Je past object-fit: cover toe om beelden netjes bij te snijden.
• Je schrijft correcte alt-teksten voor afbeeldingen.

1. HTML: galerij met 2 rijen × 3 kolommen

We maken eerst de HTML-structuur. De galerij bestaat uit één <div class="gallery"> met daarin zes tegels <div class="gallery-item">. Elke tegel bevat één afbeelding met de klasse .tile. De alt-tekst beschrijft kort wat er op de foto te zien is.

<!-- ======= GALLERY: 2 rijen × 3 kolommen ======= -->
<div class="gallery">
  <div class="gallery-item">
    <img class="tile" src="images/gallery/01.jpg" alt="Sfeerverlichting" loading="lazy">
  </div>
  <div class="gallery-item">
    <img class="tile" src="images/gallery/02.jpg" alt="Kostuums" loading="lazy">
  </div>
  <div class="gallery-item">
    <img class="tile" src="images/gallery/03.jpg" alt="Pompoenen" loading="lazy">
  </div>

  <div class="gallery-item">
    <img class="tile" src="images/gallery/04.jpg" alt="DJ Booth" loading="lazy">
  </div>
  <div class="gallery-item">
    <img class="tile" src="images/gallery/05.jpg" alt="Dansvloer" loading="lazy">
  </div>
  <div class="gallery-item">
    <img class="tile" src="images/gallery/06.jpg" alt="Light effects" loading="lazy">
  </div>
</div>

Je mag de bestandsnamen en alt-teksten aanpassen aan jouw project (bijvoorbeeld Oostende, portfolio, concertfoto’s, …).

2. CSS: afbeeldingen responsief maken

Zorg er eerst voor dat alle afbeeldingen zich netjes aanpassen aan de breedte van hun container. Dit is een algemene regel die je meestal bovenaan in je stylesheet plaatst:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

• max-width: 100%: afbeelding wordt nooit breder dan de container.
• height: auto: de hoogte past automatisch aan (verhouding blijft correct).
• display: block: haalt de “extra ruimte” onder de afbeelding weg.

3. Flexbox-grid en vaste beeldverhouding

Nu maken we van de galerij een echt raster met drie kolommen. We gebruiken een flexcontainer (.gallery) met flex-items (.gallery-item). Elke tegel krijgt via aspect-ratio dezelfde beeldverhouding.

/* Container voor de fotogalerij */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;                /* ruimte tussen de tegels */
}

/* Elke tegel (flex-item) neemt ongeveer 1/3 van de rij in */
.gallery-item {
  flex: 1 1 calc(33.333% - 1rem);
}

/* Galerij met afbeeldingen van gelijke grootte */
.gallery img.tile {
  width: 100%;
  aspect-ratio: 3 / 4;      /* eventueel 1/1, 3/2, 16/9, ... */
  object-fit: cover;
  object-position: center;
  display: block;
}

• display: flex + flex-wrap: wrap De tegels komen netjes naast elkaar en springen naar een nieuwe rij als er geen plaats meer is.
• flex: 1 1 calc(33.333% - 1rem) Elke .gallery-item neemt ongeveer een derde van de rij in. De - 1rem compenseert de gap.
• aspect-ratio: 3 / 4 De tegels hebben altijd dezelfde verhouding (hier: portretformaat).
• object-fit: cover De foto vult de hele tegel en wordt netjes bijgesneden.

Probeer gerust andere verhoudingen uit, bijvoorbeeld:

• aspect-ratio: 1 / 1; → vierkante tegels
• aspect-ratio: 3 / 2; → liggend formaat
• aspect-ratio: 16 / 9; → breedbeeld (video-stijl)

Later, wanneer je met Bootstrap werkt, ga je een gelijkaardig raster kunnen opbouwen met klassen zoals .row en .col-4. Het principe blijft hetzelfde: je verdeelt de rij in gelijke kolommen.

4. Samenvatting

• De galerij bestaat uit één container .gallery met zes tegels .gallery-item.
• Met flexbox maak je een raster van 3 kolommen × 2 rijen.
• Met aspect-ratio en object-fit: cover worden alle afbeeldingen even groot en mooi bijgesneden.
• De HTML- en CSS-snippets kun je hergebruiken in andere projecten (Halloween, portfolio, project Oostende, …).