CSS - 圖片庫

上一頁
下一頁

CSS 圖片庫用於以響應式且視覺上吸引人的格式組織和顯示圖片。CSS 屬性可用於控制圖片的佈局、大小、形狀、間距、跨度以及許多其他視覺效果。在本教程中，我們將學習所有這些。

CSS 圖片庫通常用於網站上以視覺上吸引人的方式顯示產品、作品集或其他視覺內容。

以下是 tutorialspoint 課程圖片庫的簡單示例。

Gallery Image 1 Gallery Image 2 Gallery Image 3 Gallery Image 4 Gallery Image 5 Gallery Image 6

目錄


 

要建立一個簡單的圖片庫，您可以按照以下步驟操作

  • 設定 HTML 結構：建立一個容器（例如，<div>）來容納所有圖片。並使用<img>標籤逐個渲染圖片。
  • 準備圖片：確保所有圖片的尺寸一致。如果圖片尺寸不同，請為佈局中的所有圖片設定一個共同的高度（或在某些情況下為寬度），以便可以根據高度調整寬度。
  • 設定樣式佈局：使用 CSS 網格佈局系統來定義容器的佈局。然後，您可以使用網格佈局系統的各種屬性定義庫所需的列數或大型圖片的跨度。
  • 使其響應式：使用 CSS 媒體查詢根據螢幕尺寸調整列數或圖片大小。
  • 新增懸停效果：使用 CSS :hover偽類新增效果，例如在使用者將滑鼠懸停在圖片上時縮放、更改邊框或陰影效果。

要顯示一個簡單的圖片庫，我們可以使用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>

此示例演示瞭如何使用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>

以下示例演示瞭如何使用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 網格佈局是設計圖片庫最常用的佈局系統，我們可以用它以二維方式排列圖片。讓我們來看一個例子。

示例

<!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>

大螢幕輸出

小螢幕輸出

標籤式圖片庫意味著圖片的排列方式是最初顯示圖片的較小版本，當您點選該小圖片時，將開啟同一圖片的較大版本。讓我們看看如何設計它。

示例

<!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 和 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>
列印頁面
上一頁
下一頁
廣告