Come creare: Galleria di immagini responsive

Pagina precedente Griglia di immagini
Pagina successiva Galleria di immagini scorrevoli

Impara come creare una galleria di immagini responsive con CSS.

Galleria di immagini

Ajusta la dimensione della finestra del browser per vedere l'effetto di risposta:

Aggiungi qui una descrizione dell'immagine.

Aggiungi qui una descrizione dell'immagine.

Aggiungi qui una descrizione dell'immagine.

Aggiungi qui una descrizione dell'immagine.

Prova tu stesso

Crea una galleria di immagini

Passo 1 - Aggiungi HTML:

<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">Aggiungi una descrizione dell'immagine qui</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">Aggiungi una descrizione dell'immagine qui</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">Aggiungi una descrizione dell'immagine qui</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">Aggiungi una descrizione dell'immagine qui</div>
  </div>
</div>
<div class="clearfix"></div>

Secondo passaggio - Aggiungi CSS:

Questo esempio utilizza le query media per riorganizzare le immagini su schermi di diverse dimensioni: per schermi con una larghezza superiore ai 700 pixel, mostreranno quattro immagini in modo parallelo; per schermi con una larghezza inferiore ai 700 pixel, mostreranno due immagini in modo parallelo. Per schermi con una larghezza inferiore ai 500 pixel, le immagini saranno stackate verticalmente (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;
}

Prova tu stesso