Paano gumawa: Responsibong library ng imahe

Alamin kung paano gumawa ng responsibong library ng imahe gamit ang CSS.

Lumikha ng library ng imahe

Pangunahing hakbang - Magdagdag 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">Magdagdag ng paglalarawan ng litrato dito</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">Magdagdag ng paglalarawan ng litrato dito</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">Magdagdag ng paglalarawan ng litrato dito</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">Magdagdag ng paglalarawan ng litrato dito</div>
  </div>
</div>
<div class="clearfix"></div>

Ikalawang hakbang - Magdagdag ng CSS:

Ang halimbawa na ito ay gumagamit ng media query upang muling itatalaga ang pagkakalat ng mga litrato sa iba't ibang laki ng screen: para sa mga screen na mas malaki sa 700 pixel, magpakita ito ng apat na litrato na nakapapahaba; para sa mga screen na mas maliit sa 700 pixel, magpakita ito ng dalawang litrato na nakapapahaba. Para sa mga screen na mas maliit sa 500 pixel, ang mga litrato ay magsisimula ng laki (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;
}

Subukan nang sarili

Ang mga pangkat ng pahina

Tuturial:HTML 图像

Tuturial:CSS 设置图像样式