跳到主要内容

图像缩放 (Image Zoom)

『图像缩放（Image Zoom）』用于在单张图片上放大查看局部细节而不改变版式，支持鼠标滚轮 与右下角指示按钮控制镜头；放大时可选“背景调暗”以强化聚焦。

本教程目标​

  1. 了解 『图像缩放（Image Zoom）』的核心概念与适用场景
  2. 学习创建并配置图片宽度、位置与缩放镜头
  3. 掌握自动缩放、背景调暗、指示按钮与键盘操作等设置

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像缩放（Image Zoom）』开始创作。

注册/登录

何时使用图像缩放​

  • 在单张图片上查看局部细节，突出重点区域
  • 不改变页面版式，通过“缩放镜头”增强观察体验
  • 与图像并置、图像透视等组件组合，构建更丰富的图像讲解

教程示例​

下面的示例展示了在图片上使用“缩放镜头”查看局部细节，支持鼠标滚轮控制缩放（触屏设备使用系统自带的双指缩放）。

图像缩放示例：在一张风景图片上查看局部细节
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击“编辑”
  • 即可查看并操作本教程所示的设置。

创建图像缩放：分步指南​

步骤 1：创建新内容​

  1. 从 H5P 编辑器的内容类型列表中选择 『图像缩放 (Image Zoom)』 或搜索 zoom
  2. 打开编辑器进入配置界面
选择图像缩放内容类型
从内容类型列表中选择『图像缩放 (Image Zoom)』

步骤 2：填写基本信息​

在 『标题』 字段中输入：如 图像缩放示例

上传图片后，请务必填写：

  • 替代文字：用于无法查看图像时的说明与读屏辅助（例如：Image of Sommarøy in the north of Norway）
  • 悬停文字：在鼠标悬停于图片时显示的文字（可选）

如图片仅为装饰且不会影响理解，可启用 『仅作为装饰用』，此时读屏器将忽略该图像。

编辑界面：填写基本信息
上传图片并填写替代文本，提升无障碍与可读性

步骤 3：配置图片与镜头参数​

在“图片”折叠面板中，完成以下设置：

  1. 图片宽度：选择图片在容器中的宽度；图片将自适应缩放，不会超过 100% 宽度。
  2. 图片对齐：选择图片相对周围内容的对齐位置（例如：居中）。
  3. 变焦镜头宽度：设置镜头宽度，可用百分比（如 20%）或固定像素值（如 160px）。
  4. 变焦镜头高度：设置镜头高度，可用百分比（如 25%）或固定像素值（如 90px）。
  5. 变焦时图像变暗：启用后，缩放时背景图像将适度变暗，以增强聚焦效果。
编辑界面：图片宽度、对齐与镜头大小
配置图片宽度与对齐；设置镜头宽度/高度与背景变暗

步骤 4：交互行为设置​

  1. 自动缩放：可选择关闭自动缩放，改为用户主动开启。
  2. 隐藏放大指示器：右下角小圆点是缩放开关与键盘控制的入口，建议保留。
编辑界面：行为设置
配置自动缩放与隐藏放大指示器

步骤 5：保存与预览​

点击 『保存并关闭』 生成完整示例。您现在应该有一个与本教程顶部示例类似的结果。

优化与无障碍建议​

  • 清晰的替代文本与悬停文字：提升读屏可达性与说明性
  • 镜头大小与对比度：根据图像细节调整镜头尺寸；变暗选项兼顾可读性
  • 文件体积与响应式表现：压缩图片以减少加载时间；在移动端验证缩放与排版
  • 与其他组件组合：可与图像并置（左右对比）、图像透视（前/后图层比较）联合使用

专家提示：用例灵感与相关内容类型推荐​

想把『图像缩放（Image Zoom）』用得更好？以下灵感与实践建议可供参考：

  • 学术与科普：显微结构、标本纹理、天文/地理图（地貌、道路细节）
  • 艺术与设计：笔触/材质观察、修复前后细节、字体/版式微差对比
  • 工程与产品：电路板/零部件标注、界面截图中的控件与状态细节
  • 课堂与培训：作业批注示例、试题图示细节、实验装置关键部位
  • 博物展示与文献：铭文/署名、微小标记、地图图例与比例尺

制作与可达性优化：

  • 合理设置镜头大小与背景调暗，保证聚焦区域清晰且不遮挡关键信息
  • 必填替代文字（Alt）并根据学习目标撰写悬停文字；避免仅靠颜色传达信息

选型与组合建议（与其他内容类型搭配）：

最后由 Sam Xu 于 更新