Cách tạo: Lưới hình ảnh response

Học cách tạo lưới hình ảnh响应.

Lưới hình ảnh响应

Học cách tạo hình ảnh thư viện có thể chuyển đổi giữa bốn, hai hoặc hình ảnh toàn màn hình dựa trên kích thước màn hình:

Thử ngay

Tạo lưới hình ảnh

Bước 1 - Thêm HTML:

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>

Bước 2 - Thêm CSS:

Tạo thiết kế响应 bằng CSS Flexbox:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* Tạo bốn cột song song bằng nhau */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* Thiết kế响应 - Tạo hai cột thay vì bốn cột */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* Thiết kế响应 - Làm hai cột đ堆叠, thay vì đ(Stack) song song */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

Thử ngay

Trang liên quan

Hướng dẫn:CSS Flexbox

Hướng dẫn:Cách tạo lưới hình ảnh