Πώς να δημιουργήσετε: Ανταποκρινόμενη βιβλιοθήκη εικόνων

Μάθετε πώς να δημιουργήσετε μια ανταποκρινόμενη βιβλιοθήκη εικόνων με CSS.

Βιβλιοθήκη εικόνων

Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να δείτε τα αποτελέσματα:

Πεκίνο
Προσθέστε εδώ μια περιγραφή της εικόνας.
Wuhan
Προσθέστε εδώ μια περιγραφή της εικόνας.
Άνζιό
Προσθέστε εδώ μια περιγραφή της εικόνας.
Chóngqīng
Προσθέστε εδώ μια περιγραφή της εικόνας.

Δοκιμάστε προσωπικά

Δημιουργία βιβλιοθήκης εικόνων

Πρώτη βήμα - Προσθήκη 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">Προσθέστε μια περιγραφή της εικόνας εδώ</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">Προσθέστε μια περιγραφή της εικόνας εδώ</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">Προσθέστε μια περιγραφή της εικόνας εδώ</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">Προσθέστε μια περιγραφή της εικόνας εδώ</div>
  </div>
</div>
<div class="clearfix"></div>

Δεύτερη βήμα - Προσθήκη CSS:

Αυτό το παράδειγμα χρησιμοποιεί ερωτήσεις μέσων για να αναδιατάξει τις εικόνες σε διαφορετικές διαστάσεις οθόνης: Για οθόνες με πλάτος μεγαλύτερο από 700 εκατοστά, θα εμφανίζονται παράλληλα τέσσερις εικόνες; Για οθόνες με πλάτος μικρότερο από 700 εκατοστά, θα εμφανίζονται παράλληλα δύο εικόνες. Για οθόνες με πλάτος μικρότερο από 500 εκατοστά, οι εικόνες θα τοποθετούνται κάθετα (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;
}

Δοκιμάστε προσωπικά

Σελίδες σχετικές

Εκμάθηση:Εικόνα HTML

Εκμάθηση:Ρύθμιση στυλ εικόνας CSS