网站API-图片容器与scroll-wrapper

目录

scroll-wrapper

摘要

本文用于介绍 CSS api：scroll-wrapper的使用方法，该api用于实现多行多列的含题注图片的浏览，并保证可以通过滚动条观看，如：

自动收获的矿车
旋转的风车景观
流水线工厂
基于吹牛逼技术实现的自动牧场

1. 调用方法

1.1 基本结构

刚才的代码实现为：

<center class="scroll-wrapper">
    <div class="scroll-grid">
        <!-- 第一行 -->
        <div class=scroll-row>
            <div class=figure-item>
                <div class=img-container>
                    <img src=http://akisakura.top/wp-content/uploads/2025/05/机械动力-初识-前言1.png>
                </div>
                <div class=figure-caption>自动收获的矿车</div>
            </div>
            <div class=figure-item>
                <div class=img-container>
                    <img src=http://akisakura.top/wp-content/uploads/2025/05/机械动力-初识-前言2.webp>
                </div>
                <div class=figure-caption>旋转的风车景观</div>
            </div>
        </div>
        <!-- 第二行 -->
        <div class=scroll-row>
            <div class=figure-item>
                <div class=img-container>
                    <img src=http://akisakura.top/wp-content/uploads/2025/05/机械动力-初识-前言3.png>
                </div>
                <div class=figure-caption>流水线工厂</div>
            </div>
            <div class=figure-item>
                <div class=img-container>
                    <img src=http://akisakura.top/wp-content/uploads/2025/05/机械动力-初识-前言4.png>
                </div>
                <div class=figure-caption>基于吹牛逼技术实现的自动牧场</div>
            </div>
        </div>
    </div>
</center>

上面的结构表示为下图：

  1. 首先，需要调用scroll-wrapper类，表示接下来这一块是滑块图库。
  2. 为了实现自适应布局的行，需要调用scroll-grid类。
  3. 接下来你可以在 grid 中添加任意多的scroll-row类来表示不同的行。
  4. 对于每一行的具体内容，请使用 figure-item类来作为包含图注的图片的容器。
    • 其中，图片进一步使用 img-container类来包装（采用了自适应布局，可以防止图片出界），里面使用 <img> 输出图片
    • 题注使用 figure-caption类 来规范化大小和颜色等，如果不在乎，也可以不使用。

1.2 可调节参数

（1）图片参数

如果想要调节单独图片的尺寸，可以在调用 img-container 时控制 --height 或 --width 的大小。推荐修改 --width 而不是 --height 以保证排版美观。

如果在行列容器 scroll-wrapper 中使用时请调整 --height ，且调整值应以像素为单位！

示例：

<center>
    <div class=img-container style="--width: 50%">
        <img src=http://akisakura.top/wp-content/uploads/2025/05/机械动力-初识-前言3.png>
    </div>
</center>

效果：

另外可以调节图片四周圆角弧度，只需要修改 --border-radius 即可。

（2）行列尺寸

由于行列尺寸是自适应图片的，想要调整需要调整图片本身大小。
比如想要将一行的高度缩小，需要把这一行所有的图片的高度都缩小。行高度取决该行所有图片的最大高度。宽度同理。

如果需要调整行高度，请在对 img-container 使用 --height 属性时指定单位为 px ，否则可能发生意外的错误。

2. CSS代码实现 

:root {
    --limit-width: 620px;
    --limit-height: 400px; /* 这两个参数跟全局页面尺寸有关 */
}
.scroll-wrapper {
    --width: var(--limit-width);
    --height: var(--limit-height);
    width: var(--width);
    height: var(--height);
    overflow-x: auto;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
    transition: transform 0.3s ease;
}

.scroll-grid {
    display: inline-flex;
    flex-direction: column;
    gap: calc(var(--limit-height) * 0.02); /* 行间距 */
}

.scroll-row {
    display: flex;
    gap: calc(var(--limit-width) * 0.02); /* 列间距 */
    padding: 0 10px; /* 行左右内边距 */
}

.figure-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: calc(var(--limit-height) * 0.02);
}

/* 图片尺寸自适应 */
.img-container {
    --width: auto;
    --border-radius: 8px;
    --height: calc(var(--limit-height) * 0.75);
    width: var(--width);
    max-width: calc(var(--limit-width) * 0.9);
    height: var(--height);
    display: flex;
    justify-content: center;
}

.img-container img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--border-radius);
}

/* 题注样式 */
.figure-caption {
    margin-top: 15px;
    text-align: center;
    font: 14px/1.5 Arial, sans-serif;
    color: #666;
    padding: 0 10px;
}

/* 隐藏滚动条（可选） */
.scroll-wrapper::-webkit-scrollbar {
    height: 8px;
    background: #f1f1f1;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* 悬停效果（可选） */
.figure-item:hover {
    transform: scale(1.02);
}
标签

发表回复