Tidadigi Logo

CSS Image Gallery

Tạo một thư viện ảnh responsive là cách tuyệt vời để trưng bày ảnh trên website. Trong bài viết này, chúng ta sẽ cùng xây dựng thư viện ảnh responsive bằng HTML và CSS. Hướng dẫn này giúp bạn tạo thư viện đẹp mắt, hiển thị tốt trên mọi thiết bị.

Bước 1: Tạo Cấu Trúc Thư Viện Cơ Bản

Đầu tiên, hãy thiết lập cấu trúc cơ bản cho thư viện của chúng ta. Mỗi thư viện sẽ chứa nhiều phần tử div khác nhau. Mỗi phần tử div chứa một hình ảnh và phần mô tả cho ảnh đó.

Đây là ví dụ về cấu trúc HTML:

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Image Gallery</title>
</head>

<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <img src="your-image-url-here" alt="Image Description">
            </div>
            <div class="text">
                Image Description Here
            </div>
        </div>
        <!-- Add more boxes as needed -->
    </div>

</body>

</html>

Bước 2: Tạo Kiểu Cho Thư Viện Bằng CSS

Tiếp theo, chúng ta cần tạo kiểu cho thư viện bằng CSS để trông hấp dẫn và responsive.

Tạo Kiểu Cho Vùng Chứa Thư Viện

Để tạo kiểu cho vùng chứa thư viện, ta đặt thuộc tính display thành flex. Điều này có nghĩa các phần tử trong vùng chứa thư viện sẽ có ngữ cảnh flex. Chúng ta cũng đặt thuộc tính flex-flow thành row wrap để định nghĩa hướng và cách xuống dòng.

CSS 
.gallery {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

Tạo Kiểu Cho Hộp

Bây giờ, hãy tạo kiểu cho mỗi hộp trong thư viện. Ta sẽ đặt flex-basis thành 20% để mỗi hộp chiếm 20% chiều rộng vùng chứa. Chúng ta cũng thêm padding, margin và hiệu ứng đổ bóng để trông đẹp hơn.

CSS 
.box {
  flex-basis: 20%;
  width: 100%;
  padding: 10px;
  margin: 8px;
  box-shadow: 1px 1px 15px 1px green;
}

Bước 3: Làm Cho Thư Viện Trở Nên Responsive

Để làm cho thư viện responsive, ta dùng CSS media queries. Điều này đảm bảo thư viện trông tuyệt vời trên các thiết bị có kích thước màn hình khác nhau.

Ví Dụ Media Query

Đây là ví dụ về media query điều chỉnh bố cục cho màn hình có chiều rộng tối đa 300px.

CSS 
@media only screen and (max-width: 300px) { 
  .box {
    flex-basis: 100%;
  }
}

Ví Dụ Kết Quả

Đây là kết quả cuối cùng có thể trông như thế nào:

html 
<!DOCTYPE html>
<html>

<head>
    <style>
        /* style to set body of page */
        body {
            width: 100%;
            margin: auto;
        }

        .gallery {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }

        .box {
            flex-basis: 20%;
            width: 100%;
            padding: 10px;
            margin: 8px;
            box-shadow: 1px 1px 1px 1px green;
        }

        .text {
            text-align: center;
            margin-top: 5px;
        }

        .image:hover {
            border: 3px solid green;
        }

        /* media query used here */
        @media only screen and (max-width: 300px) {
            .box {
                flex-basis: 100%;
            }
        }

        @media only screen and (max-width:500px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>

<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                Geeks Classes Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                GeekforGeeks Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                Geeks Image
            </div>
        </div>
    </div>
</body>

</html>

Output:

css-image-gallery

Chúng tôi đã hướng dẫn cách tạo thư viện ảnh responsive bằng HTML và CSS. Bằng cách làm theo các bước này, bạn có thể xây dựng thư viện tuyệt đẹp trên mọi thiết bị. Đừng quên tùy chỉnh thư viện bằng ảnh và kiểu dáng riêng để tạo sự độc đáo.


Last Updated : 21/07/2025