圖像處理

本文提供一些調整圖片大小和對齊圖片的用例。

調整圖片大小#

我們利用 URL 的查詢字符串來調整圖片大小。

指定寬度和保留比率#

1![Resize](featured-sample.png?width=300px)

指定高度和保留比率#

1![Resize](featured-sample.png?height=200px)

指定寬度和高度#

1![Resize](featured-sample.png?width=300px&height=200px)

它不僅可以用於頁面資源，而且也適用於 static 圖像和外部圖像。 但是，除了頁面資源外，其他資源的大小都是按內聯樣式調整的，也就是說，它們的原始大小不會改變。

對齊圖像#

我們可以利用 URL 片段輕易地對齊圖像，比如：#center, #floatleft 和 #floatright 分別表示居中對齊、向左浮動和向右浮動。

居中對齊#

添加 #center 使圖片居中對齊。

舉個例子：![Center](/featured-sample.png#center)。

向左浮動#

添加 #floatleft 使圖片向左浮動。

舉個例子：![Float Left](/featured-sample.png#floatleft)。

向右浮動#

同樣的，我們也可以添加 #floatright 使圖片向右浮動。

舉個例子：![Float Right](/featured-sample.png#floatright)。

Caption#

HBS 允許使用圖片標題作為 caption，但這個功能默認是關閉的，你需要啟用 post.imageTitleAsCaption 參數：

• params.
• toml
• yaml
• json

1[post]
2  imageTitleAsCaption = true

1post:
2  imageTitleAsCaption: true

1{
2   "post": {
3      "imageTitleAsCaption": true
4   }
5}

1![Image Caption](/featured-sample.png "Use Image Title as Caption")