- 欢迎加入官方Discord和Telegram群组!
- 我们正在删除政治内容页面,还您一个干净的H萌娘,净化社区的同时也可以让您认真学习和讨论性知识(?
- 不知道接下来该看什么?可以去查阅本站的优质条目
- 如果您在H萌娘上发现某些内容错误/空缺,请勇于修正/添加!编辑H萌娘其实很容易!(由于遭到破坏,自动确认用户外的编辑现在会先审核 )
- 有任何意见、建议、求助都可以在 讨论版 提出!
幫助:外部圖像
跳至導覽
跳至搜尋
本頁面是一個關於如何使用外部圖像的幫助,如果您需要插入內部圖片,請參見:Help:圖像
簡單語法[編輯原始碼]
簡單的使用外部圖片,可以直接將圖片地址輸入或粘貼指條目內(如下文)。
簡單顯示外部圖像[編輯原始碼]
直接在文中插入圖片地址,即可顯示圖片:
https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png
效果如下:
這樣使用的時候在圖片後不要帶有URL參數。
你也可以使用 {{filepath:内部图片文件名}}
來把內部圖片以外部圖像的格式顯現,如{{filepath:2010-DEC-13MoeGirlWikiLogo.png}}
效果如下:
https://hmoegirl.cyou/images/e/ea/2010-DEC-13MoeGirlWikiLogo.webp
使用模板排版外部圖片[編輯原始碼]
- 參見:模板:圖片外鏈
帶連結的外部圖像[編輯原始碼]
[http://zh.moegirl.org.cn/ https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]
- 注意:格式為 [連結地址(空格)圖片地址]
效果如下:
帶註釋的外部圖像[編輯原始碼]
- 主條目:Template:外部圖片註釋
萌娘百科中有一個模板,可以讓編輯者方便地為外部圖片加上框架,並且能夠對齊浮動。
語法為:{{外部图片注释|图片地址|注释文字|位置(默认为右)|宽度=尺寸(默认为400px)}}
{{外部图片注释|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|这是萌娘百科LOGO|左|宽度=150px}}
效果如下:
您也可以使用這個模板的增強版{{Outer image}},詳見模板:Outer image/doc。
<img />語法[編輯原始碼]
<img />語法可能相對複雜,但使用這個語法可以改變外部圖片大小(簡單語法無法實現)等功能。
基礎格式[編輯原始碼]
<img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" />
效果如下:
這種寫法顯示出來和#簡單顯示外部圖片中的圖片無異。
圖片縮放[編輯原始碼]
實現圖片縮放有兩種方式:定義圖片寬度(width屬性)或/和定義圖片高度(height屬性)。
使用寬度屬性[編輯原始碼]
如果需要一個寬度為250px的圖片:
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="width:250px;" />
效果如下:
使用高度屬性[編輯原始碼]
如果需要一個高度為150px的圖片:
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:150px;" />
效果如下:
同時使用[編輯原始碼]
同時定義高度和寬度可以實現拉伸圖片的效果。
- 註:寬度屬性和高度屬性沒有先後順序之差別,即「先寫寬度後寫高度」和「先寫高度後寫寬度」沒有差別。
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />
效果如下:
- 注意1:通常過大的圖片不應該放置在條目正文內,這會不方便讀者瀏覽。大多數圖片的寬度應大約位於100至400像素之間,所以在設定圖片大小時,數值不應超過這個範圍。
- 注意2:強行放大圖片會使解像度下降,因為這我們要求圖片變成500像素寬,但圖片的實際大小並沒有500像素寬只有400像素,因此瀏覽器的排版顯示器便要將圖片強制擴大至500像素寬,其顯示效果便會較差了。所以切記永不依照這個方法來放大位圖圖片。
其它屬性[編輯原始碼]
<img />語法還有其它的屬性可以選用:
屬性 | 值 | 描述 |
---|---|---|
src | URL | 必須使用。規定顯示圖像的URL。 |
height | pixels % |
定義圖像的高度。 |
width | pixels % |
設置圖像的寬度。 |
alt | text | 規定圖像的替代文本(當圖片無法顯示時,顯示文本內容)。 |
title | text | 鼠標滑過時顯示的文字提示。 |
longdesc | URL | 指向包含長的圖像描述文檔的URL。 |
ismap | URL | 將圖像定義為伺服器端圖像映射。 |
usemap | URL | 將圖像定義為客戶器端圖像映射。 |
- 各屬性詳細資料請參見:參考資料。
參考資料與註釋[編輯原始碼]
- HTML <img> 标签
- 更多圖像模板參見:分類:圖像維護模板