图像处理

本文提供一些调整图片大小和对齐图片的用例。

调整图片大小#

我们利用 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](/center.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")