Làm thế nào để thực hiện - Lưới hình ảnh đáp ứng
Tìm hiểu cách tạo Lưới hình ảnh đáp ứng.
Lưới hình ảnh đáp ứng
Tìm hiểu cách tạo thư viện hình ảnh thay đổi giữa bốn, hai hoặc hình ảnh toàn chiều rộng, tùy thuộc vào kích thước màn hình:
Tạo lưới hình ảnh
Bước 1) Thêm HTML:
Thí dụ
<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:
Sử dụng CSS Flexbox để tạo bố cục đáp ứng:
Thí dụ
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/*
Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two
column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex:
50%;
max-width: 50%;
}
}
/*
Responsive layout - makes the two columns stack on top of each other instead
of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Mẹo: Đi tới Hướng dẫn về lưới hình ảnh của chúng tôi để tìm hiểu cách tạo lưới có thể nhấp thay đổi giữa các cột.
Mẹo: Đi tới Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về mô-đun bố cục hộp linh hoạt.