Cách thực hiện - Thư viện hình ảnh đáp ứng
Tìm hiểu cách tạo thư viện hình ảnh phản hồi bằng CSS.
thư viện hình ảnh
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi:
Hãy tự mình thử »Tạo một thư viện hình ảnh
Bước 1) Thêm HTML:
Ví dụ
<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">Add a description of the image here</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">Add a description of the image here</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">Add a description of the image here</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">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
Bước 2) Thêm CSS:
Ví dụ này sử dụng truy vấn phương tiện để sắp xếp lại hình ảnh trên các kích thước màn hình khác nhau: đối với màn hình rộng hơn 700px, nó sẽ hiển thị bốn hình ảnh cạnh nhau, đối với màn hình nhỏ hơn 700px, nó sẽ hiển thị hai hình ảnh cạnh nhau. Đối với màn hình nhỏ hơn 500px, hình ảnh sẽ xếp chồng theo chiều dọc (100%):
Ví dụ
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;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về hình ảnh HTML của chúng tôi để tìm hiểu thêm về hình ảnh.
Mẹo: Hãy xem Hướng dẫn tạo kiểu cho hình ảnh bằng CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho hình ảnh.