编辑“︁Help:图像”︁（章节）

==避免图像“堆积”==
许多用户进行图像浮动时常碰到一个问题，就是多幅图片有时会水平地“堆积”在一起，对于大型图片尤其如此。“最佳”的解决方法是，添加更多的文本，但有时这是不可能的。本节将介绍一些解决办法，即在图像后加入“<br style="clear:both;"&gt;”或{{Tl|Clear}}（见源代码）

[[File:wiki.png|thumb|300px|right|維基百科徽標]]
<span style="color:#808080; font-size:90%">
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
</span>
[[File:Wikimedia Foundation RGB logo with text.svg|right|thumb|200px|維基媒體基金會徽標]]
<br style="clear:both;" />

=== 联合对齐相似图片===
经常会有两幅从逻辑上讲需要归于一组的相似图片。为做到这一点，需要加入一些html标记：
<pre>
  <div style="float:right;width:315px;">
  [[File:wiki.png|none|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]

  [[File:wikimedia.png|right|thumb|200px|維基媒體基金會徽標]]
  </div>
</pre>

<div style="float:right;width:315px;">
[[File:wiki.png|right|thumb|300px|維基百科徽標]]
<br style="clear:all;" />
[[File:Wikimedia Foundation RGB logo with text.svg|right|thumb|200px|維基媒體基金會徽標]]
</div>

<span style="color:#808080; font-size:90%">
維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。

維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。

維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。維基媒體基金會。
</span>
<br style="clear:both;" />

有时候也可以水平对齐两幅图像：
[[File:wiki.png|left|thumb|300px|維基百科徽標]]
[[File:wiki.png|none|thumb|300px|維基百科徽標]]

<pre>
[[File:wiki.png|left|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
[[File:wiki.png|none|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
</pre>

不过，这应当较少采用，因为对使用较窄的浏览器窗口者有可能导致图片超过屏幕的右边缘。

实现这个效果的方法是利用[[Help:使用表格|表格标记]]：
<pre>
{|
|-
| [[File:wiki.png|none|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
| [[File:wiki.png|none|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
|}
</pre>

另一种避免过宽的办法是，将两幅图都左对齐，直接进行堆积。
[[File:wiki.png|left|thumb|300px|維基百科徽標]]
[[File:wiki.png|left|thumb|300px|維基百科徽標]]
{{clear}}
<pre>
[[File:wiki.png|left|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
[[File:wiki.png|left|thumb|300px|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-]]
{{clear}}
</pre>
这条命令<pre>{{clear}}</pre>是为了防止后面的文字直接显示在图片旁。

===左右交替浮动===
或许最简便的方式便是采用左右交替浮动的方法了 —— 这种方式使得两幅图片不会互相干扰，更不会叠加在一起。

<pre>[[File:wiki.png|thumb|150px|right|維基百科徽標]]
[[File:wikimedia.png|left|thumb|150px|維基媒體基金會徽標]]</pre> 

[[File:wiki.png|thumb|150px|right|維基百科徽標]]
[[File:wikimedia.png|left|thumb|150px|維基媒體基金會徽標]]
<span style="color:#808080; font-size:90%">
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
</span>
<br style="clear:both;" />

===強迫換行===
最後的手段是強迫瀏覽器加一空白行，令所有文字和圖片都在第一幅圖片之下出現。但圖片旁的文字之下可能會出現唐突的空白。記住，用戶的瀏覽器、顯示屏解像度、預設的文字大小、瀏覽器上工具列的數目等不同設定，都可能影響文本如何浮動和環繞圖片。因此，不要為了令頁面在你的電腦上看來美觀而強行改變頁面設計。只有在必須的情況下才把頁面“劈開”。可以的話，讓頁面根據邏輯排列即可。

你亦可以使用[[Template:Stack]]達至相近的效果。
<pre> <br style="clear:both;"> </pre> 或是 <pre> {{-}}</pre /> 

[[File:wiki.png|thumb|300px|right|維基百科徽標]]
<span style="color:#808080; font-size:90%">
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
</span>
<br style="clear:both;" />
[[File:wikimedia.png|right|thumb|200px|維基媒體基金會徽標]]
<span style="color:#808080; font-size:90%">
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
海纳百川，有容乃大。维基百科，自由的百科全书。
</span>
<br style="clear:both;" />

=== 圖片集 ===
====維基標記語言和[[層疊樣式表]]（CSS）====
要在圖片集展示一系列圖片，一個簡單的方法是使用維基標記語言和[[层叠样式表]]（CSS）：讓所有圖片靠左浮動，並在其後清除靠左浮動的設定，以免圖片在圖片集以後的內容中出現。

<pre>
<nowiki>
[[File:wiki.png|128px|thumb|left|維基百科徽標1]]
[[File:wiki.png|128px|thumb|left|維基百科徽標2]]
[[File:wiki.png|128px|thumb|left|維基百科徽標3]]
[[File:wiki.png|128px|thumb|left|維基百科徽標4]]
[[File:wiki.png|128px|thumb|left|維基百科徽標5]]
[[File:wiki.png|128px|thumb|left|維基百科徽標6]]
<br style="clear: left" />
</nowiki>
</pre>

好處：簡單、圖片會根據畫面大小換行。

[[File:wiki.png|128px|thumb|left|維基百科徽標1]]
[[File:wiki.png|128px|thumb|left|維基百科徽標2]]
[[File:wiki.png|128px|thumb|left|維基百科徽標3]]
[[File:wiki.png|128px|thumb|left|維基百科徽標4]]
[[File:wiki.png|128px|thumb|left|維基百科徽標5]]
[[File:wiki.png|128px|thumb|left|維基百科徽標6]]
<br style="clear: left" />

====畫廊標記====
{{anchor|新的MediaWiki<nowiki><gallery></nowiki>标记}}
{{main|Help:畫廊}}
新的{{Example needed}}MediaWiki軟體支援''<nowiki><gallery></nowiki>''標記，是建立圖片集的簡便方法：

<pre>
<nowiki>
<gallery>
File:wiki.png|維基百科徽標1
File:wiki.png|維基百科徽標2
File:wiki.png|維基百科徽標3
File:wiki.png|維基百科徽標4
File:wiki.png|維基百科徽標5
File:wiki.png|維基百科徽標6
File:wiki.png|維基百科徽標7
File:wiki.png|維基百科徽標8
</gallery>
</nowiki>
</pre>

好處：簡單方便、圖片之間沒有浪費空間。未來的MediaWiki可能會提供更多這類型的支援。

壞處：圖片不會根據畫面大小換行、不能設定圖片大小（希望下一個版本可以改善這些不便之處）。

你可以在[[mw:Help:Images#Gallery_syntax]]的帮助文档中获得更加详细的内容。

<gallery>
File:wiki.png|維基百科徽標1
File:wiki.png|維基百科徽標2
File:wiki.png|維基百科徽標3
File:wiki.png|維基百科徽標4
File:wiki.png|維基百科徽標5
File:wiki.png|維基百科徽標6
File:wiki.png|維基百科徽標7
File:wiki.png|維基百科徽標8
</gallery>

让图片集整体居中显示的方法：

<pre>
<nowiki>
{| align=center border=1
|- 
| <gallery>
File:wiki.png|-{zh-hant:維基百科徽標; zh-hans:维基百科徽标;}-1
File:wiki.png|維基百科徽標2
File:wiki.png|維基百科徽標3
File:wiki.png|維基百科徽標4
File:wiki.png|維基百科徽標5
File:wiki.png|維基百科徽標6
File:wiki.png|維基百科徽標7
File:wiki.png|維基百科徽標8
</gallery>
|}
</nowiki>
</pre>

整体居中的效果如下：
{| align=center border=1
|- 
| <gallery>
File:wiki.png|維基百科徽標1
File:wiki.png|維基百科徽標2
File:wiki.png|維基百科徽標3
File:wiki.png|維基百科徽標4
File:wiki.png|維基百科徽標5
File:wiki.png|維基百科徽標6
File:wiki.png|維基百科徽標7
File:wiki.png|維基百科徽標8
</gallery>
|}

===== 标签参数 =====

新版本支持在标签内添加参数，如
<pre>
<nowiki><gallery {parameters}>
{images}
</gallery></nowiki>
</pre>
参数有如下：
* <code>caption="{标题，可以有空格}"</code>: 在画廊上显示标题，标题超过画廊宽度时会分成多列。
* <code>widths={宽度值}px</code>：设定图像图像宽度，默认120px。
* <code>heights={高度值}px</code>：设定图像最大高度。
* <code>perrow={任何整数}</code>：设定每行显示图像数。
* <code>showfilename={任何值}</code>：设定后即显示每个图像的文件名。
* <code>mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}</code>：设定照片显示的模式
<small>对于非维基媒体基金会的项目则需注意[[Special:版本|MediaWiki版本要求]]：<code>showfilename</code>需1.17+，<code>mode=*</code>需1.22+，<code>mode=slideshow</code>需1.28+。</small>

如以下代码：
<pre>
<nowiki><gallery showfilename=a widths=60px heights=60px perrow=7 caption="测试">
File:Example.svg|10
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
</gallery>
</nowiki>
</pre>

可生成：
<gallery showfilename="a" widths="60px" heights="60px" perrow="7" caption="测试">
File:Example.svg|10
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
File:Example.svg|222阿萨达
</gallery>

如要展示一系列主题相近的照片，又想让布局紧凑，可考虑使用不同的展示模式。如简介在照片上显示的模式，分别为<code>packed-hover</code>、<code>packed-overlay</code>，代表鼠标焦点在照片上可见和永远可见：
<pre><nowiki><gallery mode=packed-hover heights=80px>
<!--<gallery mode=packed-overlay heights=150px>-->
<!--<gallery mode=slideshow heights=150px>-->
File:Qilian_mountain_jyg.JPG|[[祁连山国家公园]]
File:Wuyi_Mountains_Sea_of_clouds_4.jpg|[[福建武夷山国家公园]]
File:Hoh_Xil.jpg|[[三江源国家公园]]
File:Doorgang in muur. Locatie, Chinese tuin Het Verborgen Rijk van Ming. Locatie. Hortus Haren 01.jpg|[[荷兰]]植物园中式园林的[[月亮门]]
File:Great wall-Badaling-Beijing-China - panoramio (5).jpg|[[北京长城国家公园]]
File:Chinese House and bridge at Shugborough.jpg|拍摄于[[英国]][[斯塔福德郡]]的[[中式建筑]]
File:Kochi chinese fishing-net-20080215-01a.jpg|拍摄于[[印度]][[科契]]的[[中国渔网]]
File:2007龙转头 - panoramio.jpg|[[湖南南山国家公园]]
File:Bita Lake, Potatso (Pudacuo) National Park, Diqing - panoramio.jpg|[[云南普达措国家公园]]
File:保安乡的田野 - panoramio.jpg|[[浙江钱江源国家公园]]
</gallery></nowiki></pre>

<code>mode=packed-hover</code>的显示为：
<gallery mode="packed-hover" heights="80px">
File:Qilian_mountain_jyg.JPG|[[祁连山国家公园]]
File:Wuyi_Mountains_Sea_of_clouds_4.jpg|[[福建武夷山国家公园]]
File:Hoh_Xil.jpg|[[三江源国家公园]]
File:Doorgang in muur. Locatie, Chinese tuin Het Verborgen Rijk van Ming. Locatie. Hortus Haren 01.jpg|[[荷兰]]植物园中式园林的[[月亮门]]
File:Great wall-Badaling-Beijing-China - panoramio (5).jpg|[[北京长城国家公园]]
File:Chinese House and bridge at Shugborough.jpg|拍摄于[[英国]][[斯塔福德郡]]的[[中式建筑]]
File:Kochi chinese fishing-net-20080215-01a.jpg|拍摄于[[印度]][[科契]]的[[中国渔网]]
File:2007龙转头 - panoramio.jpg|[[湖南南山国家公园]]
File:Bita Lake, Potatso (Pudacuo) National Park, Diqing - panoramio.jpg|[[云南普达措国家公园]]
File:保安乡的田野 - panoramio.jpg|[[浙江钱江源国家公园]]
</gallery>

而<code>mode=packed-overlay</code>的显示为：
<gallery mode="packed-overlay" heights="150px">
File:Qilian_mountain_jyg.JPG|[[祁连山国家公园]]
File:Wuyi_Mountains_Sea_of_clouds_4.jpg|[[福建武夷山国家公园]]
File:Hoh_Xil.jpg|[[三江源国家公园]]
File:Doorgang in muur. Locatie, Chinese tuin Het Verborgen Rijk van Ming. Locatie. Hortus Haren 01.jpg|[[荷兰]]植物园中式园林的[[月亮门]]
File:Great wall-Badaling-Beijing-China - panoramio (5).jpg|[[北京长城国家公园]]
File:Chinese House and bridge at Shugborough.jpg|拍摄于[[英国]][[斯塔福德郡]]的[[中式建筑]]
File:Kochi chinese fishing-net-20080215-01a.jpg|拍摄于[[印度]][[科契]]的[[中国渔网]]
File:2007龙转头 - panoramio.jpg|[[湖南南山国家公园]]
File:Bita Lake, Potatso (Pudacuo) National Park, Diqing - panoramio.jpg|[[云南普达措国家公园]]
File:保安乡的田野 - panoramio.jpg|[[浙江钱江源国家公园]]
</gallery>

还可以选择幻灯显示，即<code>mode=slideshow</code>：（网页加载不完全时可能会出现其他效果）
<gallery mode=slideshow heights=150px>
File:Qilian_mountain_jyg.JPG|[[祁连山国家公园]]
File:Wuyi_Mountains_Sea_of_clouds_4.jpg|[[福建武夷山国家公园]]
File:Hoh_Xil.jpg|[[三江源国家公园]]
File:Doorgang in muur. Locatie, Chinese tuin Het Verborgen Rijk van Ming. Locatie. Hortus Haren 01.jpg|[[荷兰]]植物园中式园林的[[月亮门]]
File:Great wall-Badaling-Beijing-China - panoramio (5).jpg|[[北京长城国家公园]]
File:Chinese House and bridge at Shugborough.jpg|拍摄于[[英国]][[斯塔福德郡]]的[[中式建筑]]
File:Kochi chinese fishing-net-20080215-01a.jpg|拍摄于[[印度]][[科契]]的[[中国渔网]]
File:2007龙转头 - panoramio.jpg|[[湖南南山国家公园]]
File:Bita Lake, Potatso (Pudacuo) National Park, Diqing - panoramio.jpg|[[云南普达措国家公园]]
File:保安乡的田野 - panoramio.jpg|[[浙江钱江源国家公园]]
</gallery>

====模板====
另一個可行方法是利用 [[Template:Gallery|<code><nowiki>{{gallery}}</nowiki></code> 模板]]，格式是：

<pre>
{{Gallery
| title  = 图库标题
| footer = 注脚文字
| width  = 150
| height = 170
| lines  = 2
| File:Example.jpg|图片的说明
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|图说部分也可支援[[Wikipedia:如何编辑页面|内部链接]]
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|
| File:Example.jpg|当说明内文超过指定的行数上限后，会自动出现滚动条。
| File:Example.jpg|
}}
</pre>