跳到内容

使用维基教科书/插入图像

来自维基教科书,为开放世界提供开放书籍

图像可以成为某些书籍的重要补充,说明要点或提供视觉辅助以提高读者理解。适当的图像格式可以极大地改变页面的外观。

来自维基百科的图像语法指南,包含图像的一般语法为

[[File:{name}|{type}|{location}|{size}|{border}|{caption}]]

{name} 是图像文件的名称,例如 Commons-logo.svg,存储在维基教科书或维基共享资源上。所有图像都需要指定名称。

{type} 是图像的格式类型。"thumb" 将图像缩略,将其放在一个框中,并在图像大于用户首选项中“文件”选项卡下设置的缩略图大小值时调整图像大小。默认值为 180px,用于没有帐户或未登录的用户。"frame" 将图像放在一个框中,但不调整其大小。不设置类型将仅在不使用框的情况下以原始大小显示图像,除非指定了大小。

{location} 是图像在页面上的放置位置。"left"、"right" 和 "center" 分别将图像放在页面左侧或右侧,或页面中央,并将文本环绕在图像周围。"none" 将图像放在文本下方,并将后续文本放在其下方。如果不设置位置,图像将与文本内联。

{size} 是图像的宽度(以像素为单位),写成像素数后跟 px,例如 200px 表示 200 像素宽。图像将按比例缩放以适应此大小。图像可以放大或缩小。如果未使用,则图像将以全尺寸显示,或者如果它是缩略图,则以缩略图的最大尺寸显示。对于缩略图,如果尝试将图像放大,则大小选项将不起作用。即使图像仍然低于缩略图中图像大小调整的限制(默认情况下为 180px),也会发生这种情况,如果尝试,图像将在缩略图中保持其正常大小。如果需要,仍然可以通过使用小于图像原始宽度且小于缩略图大小的大小来缩小图片。

{border} 仅通过使用 "border" 作为选项之一为图像提供灰色边框。不设置边框将使图像没有边框,除非它已经从类型中获得了边框。

{caption} 是图像的替代文本,当您将鼠标悬停在其上时会看到。它也用作使用 "thumb" 或 "frame" 的图像的标题文本。维基格式可以在其中使用,例如链接,但格式将从替代文本中删除,仅显示在标题中。如果未指定标题,则文件名将用作替代文本,并且框架或缩略图上的标题将留空。

选项的顺序无关紧要,除了名称。同时使用 thumb 和 frame 将默认使用 frame。在图像中使用多个位置将使图像使用最后给出的位置。使用多个大小时的过程相同。

插入图像

[编辑 | 编辑源代码]

可以通过键入 [[File:ImageName]] 将普通、未格式化的图片插入页面。

这会将图像插入页面,但是,图像以全尺寸显示在页面上,并且无法与文本正确集成。这将在下面演示。

添加

[[File:Vista-folder.png]]

到文本中间,使得

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.

您会同意,这看起来不太对。文本与图像的对齐方式很差,并且图像太大。

放置图像

[编辑 | 编辑源代码]

通过稍微更改图像代码,我们可以确定图像在页面上的位置。我们有几个选项可供选择,具体取决于我们正在创建的页面的所需布局。

示例一,右对齐,环绕文本

[编辑 | 编辑源代码]
[[File:Vista-folder.png|right]]

<Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.

Phasellus orci. Etiam tempor elit auctor magna. Nullam nibh velit, vestibulum ut, eleifend non, pulvinar eget, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer velit mauris, convallis a, congue sed, placerat id, odio. Etiam venenatis tortor sed lectus. Nulla non orci. In egestas porttitor quam. Duis nec diam eget nibh mattis tempus. Curabitur accumsan pede id odio. Nunc vitae libero. Aenean condimentum diam et turpis. Vestibulum non risus.

在这里,我们可以看到图像是如何放置在页面右侧,并且文本环绕在图像周围。

示例二,右对齐,带标题,环绕文本

[编辑 | 编辑源代码]
[[File:Vista-folder.png|frame|right|Caption goes here]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

标题在这里

Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.

Phasellus orci. Etiam tempor elit auctor magna. Nullam nibh velit, vestibulum ut, eleifend non, pulvinar eget, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer velit mauris, convallis a, congue sed, placerat id, odio. Etiam venenatis tortor sed lectus. Nulla non orci. In egestas porttitor quam. Duis nec diam eget nibh mattis tempus. Curabitur accumsan pede id odio. Nunc vitae libero. Aenean condimentum diam et turpis. Vestibulum non risus.

在这里,我们可以看到图像是如何放置在页面右侧,并在下方显示标题,并且文本环绕在图像周围。

示例三,左对齐,环绕文本

[编辑 | 编辑源代码]
[[File:Vista-folder.png|left]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.

在这里,我们可以看到图像是如何放置在页面左侧,并且文本环绕在图像周围。

示例四,文本不环绕

[编辑 | 编辑源代码]
[[File:Vista-folder.png|none]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.

这里我们可以看到图像似乎完全与文本分离。

调整图像大小

[编辑 | 编辑源代码]
[[File:Vista-folder.png|25px]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.

缩略图像

[编辑 | 编辑源代码]

如果你想给图像添加标题并调整其大小,请使用“thumb”而不是“frame”。

[[File:Vista-folder.png|75px|thumb|right|Caption goes here]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.

标题在这里

Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla. ← 高级技巧 · 使用维基教科书 · 维基百科入门 →

华夏公益教科书