图像¶

虽然图像是Markdown的一级公民，也是核心语法的一部分， 与他们合作可能很困难。MkDocs使用的材料 图像更舒适，提供图像对齐和图像样式 字幕。

配置¶

此配置增加了对齐图像、为图像添加字幕的能力 （将它们渲染为图形），并标记大图像以进行延迟加载。添加 将以下行转换为mkdocs.yml：

markdown_extensions:
  - attr_list
  - md_in_html
  - pymdownx.blocks.caption

请参阅其他配置选项：

• Attribute Lists
• Markdown in HTML
• Caption

灯箱¶

如果您想在文档中添加图像缩放功能 glightbox插件是一个很好的选择，因为它完美地集成了 与MkDocs的材料。使用pip进行安装：

pip install mkdocs-glightbox

然后，在mkdocs.yml中添加以下行：

plugins:
  - glightbox

我们建议您查看可用的 [配置选项][glightbox选项]。

使用¶

图像对齐¶

启用[属性列表]后，可以通过添加 通过“align”属性指定相应的对齐方向，即“align=left”或 `align=right：

![Image title](https://dummyimage.com/600x400/eee/aaa){ align=left }

![Image title](https://dummyimage.com/600x400/eee/aaa){ align=right }

如果没有足够的空间来渲染图像旁边的文本 将拉伸到视口的整个宽度，例如在移动视口上。

图片标题¶

遗憾的是，Markdown语法不提供对图像标题的原生支持， 但总是可以使用带有文字的[HTML中的Markdown]扩展名 `figure和figcaption标签：

<figure markdown="span">
  ![Image title](https://dummyimage.com/600x400/){ width="300" }
  <figcaption>Image caption</figcaption>
</figure>

但是，Caption提供了一种添加字幕的替代语法 任何Markdown块元素，包括图像：

![Image title](https://dummyimage.com/600x400/){ width="300" }
/// caption
Image caption
///

图像延迟加载¶

现代浏览器提供[对延迟加载图像的原生支持][延迟加载] 通过loading=lazy指令，该指令在中降级为渴望加载 不支持的浏览器：

![Image title](https://dummyimage.com/600x400/){ loading=lazy }

亮暗模式¶

如果您添加了[调色板切换]并希望显示不同的图像 浅色和深色配色方案，您可以附加“仅浅色”或“仅深色”` 哈希片段到图像URL：

![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)

[data-md-color-scheme="custom-light"] img[src$="#only-dark"],
[data-md-color-scheme="custom-light"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

[data-md-color-scheme="custom-dark"] img[src$="#only-light"],
[data-md-color-scheme="custom-dark"] img[src$="#gh-light-mode-only"] {
  display: none; /* Hide light images in dark mode */
}