Cách tạo: Thư viện hình ảnh tương ứng

Học cách sử dụng CSS để tạo thư viện hình ảnh tương ứng.

Thư viện hình ảnh

Vui lòng điều chỉnh kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi:

Beijing
Vui lòng thêm mô tả hình ảnh tại đây.
Wuhan
Vui lòng thêm mô tả hình ảnh tại đây.
Hangzhou
Vui lòng thêm mô tả hình ảnh tại đây.
Chongqing
Vui lòng thêm mô tả hình ảnh tại đây.

Thử ngay

Tạo thư viện hình ảnh

Bước 1 - Thêm 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">Thêm mô tả hình ảnh ở đây</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Rừng">
    </a>
    <div class="desc">Thêm mô tả hình ảnh ở đây</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Ánh sáng Bắc Cực">
    </a>
    <div class="desc">Thêm mô tả hình ảnh ở đây</div>
  </div>
</div>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Núi">
    </a>
    <div class="desc">Thêm mô tả hình ảnh ở đây</div>
  </div>
</div>
<div class="clearfix"></div>

Bước 2 - Thêm CSS:

Ví dụ này sử dụng truy vấn truyền thông để sắp xếp lại hình ảnh trên các kích thước màn hình khác nhau: cho màn hình rộng hơn 700 pixel, nó sẽ hiển thị song song bốn hình ảnh; cho màn hình hẹp hơn 700 pixel, nó sẽ hiển thị song song hai hình ảnh. Cho màn hình hẹp hơn 500 pixel, hình ảnh sẽ堆叠 thẳng đứng (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;
}

Thử ngay

Trang liên quan

Hướng dẫn:HTML ảnh

Hướng dẫn:Cài đặt hình ảnh CSS