كيفية إنشاء: مكتبة صور ديناميكية

تعلم كيفية إنشاء مكتبة صور ديناميكية باستخدام CSS.

إنشاء مكتبة الصور

الخطوة الأولى - إضافة 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