چگونه ایجاد می‌شود: کتابخانه تصاویر پاسخگو

آموزش نحوه استفاده از 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">Add a description of the image here</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">Add a description of the image here</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">Add a description of the image here</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">Add a description of the image here</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 برای استایل عکس