کیسے بنائیں: متعدد تصاویر کا مجموعہ

کس طرح سے سی ایس ایس کا استعمال کرسکتے ہیں تاکہ ایک متعدد تصاویر کا مجموعہ بناسکتے ہیں؟

تصاویر کا مجموعہ بنائیں

پہلے قدم - اچیول 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="جنگل">
    </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="نورهای شمالی">
    </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="Kوه">
    </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 برای عکس