Wie man ein: Responsives Bildarchiv erstellt

Lernen Sie, wie Sie mit CSS eine responsives Bildarchiv erstellen.

Erstellen Sie eine Bilddatenbank

Schritt 1 - Fügen Sie HTML hinzu:

<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">Fügen Sie hier eine Beschreibung des Bildes hinzu</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">Fügen Sie hier eine Beschreibung des Bildes hinzu</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">Fügen Sie hier eine Beschreibung des Bildes hinzu</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">Fügen Sie hier eine Beschreibung des Bildes hinzu</div>
  </div>
</div>
<div class="clearfix"></div>

Schritt 2 - CSS hinzufügen:

Dieser Beispiel verwendet Medienabfragen, um die Anordnung von Bildern auf verschiedenen Bildschirmgrößen neu zu ordnen: Für Bildschirme mit einer Breite von mehr als 700 Pixeln werden vier Bilder nebeneinander angezeigt; Für Bildschirme mit einer Breite von weniger als 700 Pixeln werden zwei Bilder nebeneinander angezeigt. Für Bildschirme mit einer Breite von weniger als 500 Pixeln werden die Bilder vertikal gestapelt (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;
}

Versuchen Sie es selbst

Verwandte Seiten

Anleitung:HTML-Bild

Anleitung:CSS-Einstellungen für Bildstile