CSS - 图片库

CSS 图片库用于以响应式且视觉上吸引人的格式组织和显示图片。CSS 属性可用于控制图片的布局、大小、形状、间距、跨度以及许多其他视觉效果。在本教程中，我们将学习所有这些。

CSS 图片库通常用于网站上以视觉上吸引人的方式显示产品、作品集或其他视觉内容。

CSS 图片库示例

以下是 tutorialspoint 课程图片库的简单示例。

如何用 CSS 创建图片库？

要创建一个简单的图片库，您可以按照以下步骤操作

设置 HTML 结构：创建一个容器（例如，<div>）来容纳所有图片。并使用<img>标签逐个渲染图片。
准备图片：确保所有图片的尺寸一致。如果图片尺寸不同，请为布局中的所有图片设置一个共同的高度（或在某些情况下为宽度），以便可以根据高度调整宽度。
设置样式布局：使用 CSS 网格布局系统来定义容器的布局。然后，您可以使用网格布局系统的各种属性定义库所需的列数或大型图片的跨度。
使其响应式：使用 CSS 媒体查询根据屏幕尺寸调整列数或图片大小。
添加悬停效果：使用 CSS :hover伪类添加效果，例如在用户将鼠标悬停在图片上时缩放、更改边框或阴影效果。

设计简单的 CSS 图片库

要显示一个简单的图片库，我们可以使用Flexbox布局系统。Flexbox 是一维布局系统，可用于水平或垂直显示图片或任何 html 元素。即使我们有 flex-wrap 属性可以实现多行显示，如示例所示，我们也不能像网格布局那样完全控制二维显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            gap: 20px;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
        }
        .image-gallery img {
            width: auto;
            height: 70px;
            border: 3px solid #555;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
    </div>   
</body>

</html>

带有悬停效果的图片库

我们可以使用伪类:hover来设置鼠标悬停在图片上的样式。像增加大小、更改边框颜色这样的效果会使图片库对用户看起来更具交互性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            gap: 20px;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
        }
        .image-gallery img {
            width: auto;
            height: 70px;
            border: 3px solid #555;
            border-radius: 10px;
        }
        img:hover{
            transform: scale(1.1);
            border: 3px solid #555;
        }
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
    </div>   
</body>

</html>

带有水平滚动的 CSS 图片库

此示例演示了如何使用overflow属性创建具有水平可滚动布局的图片库。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
    
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
    </div>   
</body>

</html>

带有垂直滚动的 CSS 图片库

以下示例演示了如何使用overflow属性创建具有垂直可滚动布局的图片库。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
    
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
        <img src="/css/images/css.png" alt="css">
        <img src="/css/images/html.png" alt="html">
    </div>   
</body>

</html>

CSS 网格布局图片库

CSS 网格布局是设计图片库最常用的布局系统，我们可以用它以二维方式排列图片。让我们来看一个例子。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Gallery container */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* style image items */
        .gallery img {
            width: 100%;
            height: 100px; /* Set a same height for all images */
            object-fit: fit;
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc;
            transition: all 0.3s ease;
        }

        /* Spanning the first image across two rows */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* Double the height of regular images */
        }

        /* Spanning the sixth image across two columns */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* Hover effect */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/css/images/html.png" alt="Gallery Image 2">
        <img src="/css/images/css.png" alt="Gallery Image 3">
        <img src="/css/images/html.png" alt="Gallery Image 4">
        <img src="/css/images/css.png" alt="Gallery Image 5">
        <img src="/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

响应式图片库

我们可以使用 CSS 媒体查询来创建一个响应式图片库，该库会根据屏幕宽度缩放和重新排列其内容，从而在不同的设备和屏幕尺寸上提供最佳的观看体验。在较小的屏幕上，图片将更宽且间距更大。

@media [screen width condition] {
    /* CSS rules to apply if the media query matches */
}

使用媒体查询，我们还可以为用户设备的特定方向（横向或纵向）定义样式。默认值为纵向。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Gallery container */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* 4 columns in case of large screen */
        @media (min-width: 600px) {
            .gallery {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* 1 column in case of small screen */
        @media (max-width: 599px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }

        /* Individual image items */
        .gallery img {
            width: 100%;
            height: 100px; /* Set a same height for all images */
            object-fit: fit; /* Ensure images fits the area */
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc; /* Default border color */
            transition: all 0.3s ease;
        }

        /* Spanning the first image across two rows */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* Double the height of regular images */
        }

        /* Spanning the sixth image across two columns */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* Hover effect */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/css/images/html.png" alt="Gallery Image 2">
        <img src="/css/images/css.png" alt="Gallery Image 3">
        <img src="/css/images/html.png" alt="Gallery Image 4">
        <img src="/css/images/css.png" alt="Gallery Image 5">
        <img src="/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

大屏幕输出

小屏幕输出

CSS 标签式图片库

标签式图片库意味着图片的排列方式是最初显示图片的较小版本，当您点击该小图片时，将打开同一图片的较大版本。让我们看看如何设计它。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            height: 200px;
        }
        .image-container { 
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25%;
            height: 200px;
        }
        .image-container img {
            width: auto;
            height: 50px;
            cursor: pointer; 
        }
        .gallery-tab {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .tab-content {
            display: flex;
            justify-content: space-around;
            width: 80%;
            max-height: 80%;
        }
        .tab-content img {
            width: 150px;
            height: auto;
        }
    </style>
</head>

<body>
<h1>Click on the images:</h1>
    <div class="image-gallery">
        <div class="image-container" onclick="opentab('img2')">
            <img src="/css/images/html.png" alt="Gallery Image 2" id="img2">
        </div>

        <div class="image-container" onclick="opentab('img3')">
            <img src="/css/images/css.png" alt="Gallery Image 3" id="img3">
        </div>

        <div class="image-container" onclick="opentab('img4')">
            <img src="/css/images/html.png" alt="Gallery Image 4" id="img4">
        </div>

        <div class="image-container" onclick="opentab('img5')">
            <img src="/css/images/css.png" alt="Gallery Image 5" id="img5">
        </div>
    </div>

    <div id="tab" class="gallery-tab" onclick="closetab()">
        <div class="tab-content">
            <img id="tabImg">
        </div>
    </div>

    <script>
        function opentab(imageId) {
            var tab = document.getElementById("tab");
            var tabImg = document.getElementById("tabImg");

            tab.style.display = "flex";
            tabImg.src = document.getElementById(imageId).src;
        }

        function closetab() {
            document.getElementById("tab").style.display = "none";
        }
    </script>
</body>

</html>

CSS 图片库幻灯片

通过使用 CSS 和 JavaScript，我们可以创建一个简单的幻灯片库。该库包含多张图片，但一次只显示一张图片。您可以点击左右箭头来浏览图片。要理解代码，您必须精通JavaScript。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 60%;
        }
        .slideshow-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .image-gallery {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .image-container {
            width: 100%;
            height: 100%;
        }
        .image-container img {
            width: 100%;
            height: 100%;
        }
        .prev-img, .next-img {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
        }
        .next-img {
            right: 0;
        }
        .prev-img:hover, .next-img:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .bottom-img-container {
            text-align: center;
            margin-top: 20px;
        }
        .bottom-img {
            height: 40px; 
            width: 50px; 
            margin: 0 10px; 
            cursor: pointer;
            opacity: 0.5; 
        }
        .bottom-img.current-bottom-img {
            opacity: 1; 
        }
    </style>
</head>

<body>
    <div class="container">
    <div class="slideshow-container">
        <div class="image-gallery">
            <div class="image-container">
            <img src="/css/images/scenery.jpg" >
            </div>
            <div class="image-container">
            <img src="/css/images/scenery3.jpg" >
            </div>
            <div class="image-container">
                <img src="/css/images/scenery4.jpg">
            </div>         
        </div>

        <a class="prev-img" onclick="slides(-1)">❮</a>
        <a class="next-img" onclick="slides(1)">❯</a>
    </div>
    
    <div class="bottom-img-container">
        <img class="bottom-img current-bottom-img" 
             src="/css/images/scenery.jpg" onclick="activeSlides(1)">
        <img class="bottom-img" 
             src="/css/images/scenery3.jpg" onclick="activeSlides(2)">
        <img class="bottom-img" 
             src="/css/images/scenery4.jpg" onclick="activeSlides(3)">
    </div>
</div>

    <script>
        var index = 1;
        displaySlides(index);

        function slides(n) {
            displaySlides(index += n);
        }

        function activeSlides(n) {
            displaySlides(index = n);
        }

        function displaySlides(n) {
            var i;
            var allSlides = document.getElementsByClassName("image-container");
            var allThumbnails = document.getElementsByClassName("bottom-img");

            if (n > allSlides.length) {
                index = 1;
            }
            if (n < 1) {
                index = allSlides.length;
            }
            for (i = 0; i < allSlides.length; i++) {
                allSlides[i].style.display = "none";
            }
            for (i = 0; i < allThumbnails.length; i++) {
                allThumbnails[i].className = 
                        allThumbnails[i].className.replace(" current-bottom-img", "");
                allThumbnails[i].style.filter = "brightness(50%)";
            }
            allSlides[index - 1].style.display = "block";
            allThumbnails[index - 1].className += " current-bottom-img";
            allThumbnails[index - 1].style.filter = "brightness(100%)";
        }
    </script>
</body>

</html>

打印页面