如何创建：响应式图片库

学习如何使用 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>

ਦੂਜਾ ਪਗਲਾ - ਸਕਸੀ ਜੋੜੋ:

ਇਹ ਉਦਾਹਰਣ ਮੀਡੀਆ ਕਿਊਰੀਅਰ ਦੀ ਮਦਦ ਨਾਲ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ ਉੱਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਮੁੜ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: ਜਦੋਂ ਸਕਰੀਨ ਦੀ ਚੌੜਾਈ 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 设置图像样式