Vierkante afbeelding

Benodigde stappen

  1. Voeg de class image-square toe aan het omliggende element waar de img zich in bevindt of direct op het img-element.
  2. Voeg de container voor de afbeelding toe. Voorbeeld: <div class="image-container">. Het toevoegen van de class-naam is in dit geval optioneel en toegevoegd voor leesbaarheid van de html. Een omliggende div is ook voldoende. De container is nodig om de afbeelding variabel naar ratio te kunnen schalen.

Voorbeelden:

Enkel element

De afbeelding vult tot de maximale beschikbare breedte en schaalt de hoogte in dezelfde ratio. Dit betekent dat de afbeelding altijd rond blijft.

Foto van een strand

HTML-voorbeeld:

<div class="image-square">
  <div class="image-container">
    <img src="/img/strand.jpg" alt="Foto van een strand">
  </div>
</div>

Op div

Foto van een strand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

HTML-voorbeeld:

<div class="one-third-two-thirds">
  <div class="image-square">
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.</p>
</div>

Op elementen binnen div

Foto van een strand
Foto van een strand
Foto van een strand

HTML-voorbeeld:

<div class="column-3 images-square">
  <div class="image-container">
    <img src="/img/strand.jpg" alt="Foto van een strand" />
  </div>

  <div class="image-container">
    <img src="/img/strand.jpg" alt="Foto van een strand" />
  </div>

  <div class="image-container">
    <img src="/img/strand.jpg" alt="Foto van een strand" />
  </div>
</div>

Op elementen binnen ul

  • Foto van een strand
  • Foto van een strand
  • Foto van een strand

HTML-voorbeeld:

<ul class="column-3 images-square">
  <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>

   <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>

   <li>
    <div class="image-container">
      <img src="/img/strand.jpg" alt="Foto van een strand">
    </div>
  </li>
</ul>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/image-square";

Instelbare variabelen