Hoe te maken: Responsieve afbeeldingsbibliotheek

Vorige pagina Afbeeldingsgrijs
Volgende pagina Schuifbare afbeeldingsbibliotheek

Leer hoe je een responsieve afbeeldingsbibliotheek kunt maken met CSS.

Afbeeldingsbibliotheek

Pass op het venster van de browser aan om het responsieve effect te bekijken:

Voeg hier een beschrijving van de afbeelding toe.

Voeg hier een beschrijving van de afbeelding toe.

Voeg hier een beschrijving van de afbeelding toe.

Voeg hier een beschrijving van de afbeelding toe.

Probeer het zelf

Maak een afbeeldingsbibliotheek

Stap 1 - Voeg HTML toe:

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="img_5terre.jpg" alt="Cinque Terre">
    </a>
    <div class="desc">Voeg hier een beschrijving van de afbeelding toe</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest">
    </a>
    <div class="desc">Voeg hier een beschrijving van de afbeelding toe</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Northern Lights">
    </a>
    <div class="desc">Voeg hier een beschrijving van de afbeelding toe</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Mountains">
    </a>
    <div class="desc">Voeg hier een beschrijving van de afbeelding toe</div>
  </div>
</div>
<div class="clearfix"></div>

Tweede stap - Voeg CSS toe:

Deze voorbeeld gebruikt media queries om de weergave van afbeeldingen op verschillende schermgrootte te herschikken: voor schermen met een breedte groter dan 700 pixels worden vier afbeeldingen naast elkaar weergegeven; voor schermen met een breedte kleiner dan 700 pixels worden twee afbeeldingen naast elkaar weergegeven. Voor schermen met een breedte kleiner dan 500 pixels worden de afbeeldingen verticaal gestapeld (100%):

div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Probeer het zelf