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

调整图片大小#

我们利用 URL 的查询字符串来调整图片大小。

指定宽度和保留比率#

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

Resize

指定高度和保留比率#

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

Resize

指定宽度和高度#

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

Resize

它不仅可以用于页面资源,而且也适用于 static 图像和外部图像。 但是,除了页面资源外,其他资源的大小都是按内联样式调整的,也就是说,它们的原始大小不会改变。

对齐图像#

我们可以利用 URL 片段轻易地对齐图像,比如:#center, #float-start#float-end 分别表示居中对齐、向左浮动和向右浮动。

居中对齐#

添加 #center 使图片居中对齐。

举个例子:![Center](/center.png#center)

Center

向左浮动#

Float Start

添加 #float-start 使图片向左浮动。

举个例子:![Float Start](/featured-sample.webp#float-start)

向右浮动#

Float End

同样的,我们也可以添加 #float-end 使图片向右浮动。

举个例子:![Float End](/featured-sample.webp#float-end)

Caption#

HBS 允许使用图片标题作为 caption,但这个功能默认是关闭的,你需要启用 post.imageTitleAsCaption 参数:

1[post]
2  imageTitleAsCaption = true
1post:
2  imageTitleAsCaption: true
1{
2   "post": {
3      "imageTitleAsCaption": true
4   }
5}
1![Image Caption](/featured-sample.webp "Use Image Title as Caption")

Image Caption
Use Image Title as Caption

Crop Images#

Crop an image to match the given dimensions without resizing. You must provide both width and height. Use the anchor1 option to change the crop box anchor point.

1![Crop Image](/featured-sample.webp?crop=[width]x[height],[anchor])
  • The size [width]x[height] is required.
  • [anchor] is optional, the , is used to separate the size and anchor.
Examples
Crop Image
crop=200x200,TopLeft
Crop Image
crop=200x200,Top
Crop Image
crop=200x200,TopRight
Crop Image
crop=200x200,Left
Crop Image
crop=200x200,Center
Crop Image
crop=200x200,Right
Crop Image
crop=200x200,BottomLeft
Crop Image
crop=200x200,Bottom
Crop Image
crop=200x200,BottomRight

Fill Images#

Crop and resize an image to match the given dimensions. You must provide both width and height. Use the anchor1 option to change the crop box anchor point.

1![Fill Image](/featured-sample.webp?fill=[width]x[height],[anchor])
  • The size [width]x[height] is required.
  • [anchor] is optional, the , is used to separate the size and anchor.
Examples
Fill Image
fill=150x200,TopLeft
Fill Image
fill=150x200,Top
Fill Image
fill=150x200,TopRight
Fill Image
fill=150x200,Left
Fill Image
fill=150x200,Center
Fill Image
fill=150x200,Right
Fill Image
fill=150x200,BottomLeft
Fill Image
fill=150x200,Bottom
Fill Image
fill=150x200,BottomRight

Fit Images#

Downscale an image to fit the given dimensions while maintaining aspect ratio. You must provide both width and height.

1![Fit Image](/featured-sample.webp?fit=[width]x[height])

Fit Image

Filters#

Brightness#

The brightness must be in range (-100, 100).

1![Image Brightness](/featured-sample.webp?brightness=-30)

Image Brightness

ColorBalance#

ColorBalance creates a filter that changes the color balance of an image. The percentage parameters for each color channel (red, green, blue) must be in range (-100, 500).

1![Image ColorBalance](/featured-sample.webp?colorBalance=-50,50,150)

Image ColorBalance

Colorize#

Colorize creates a filter that produces a colorized version of an image. The hue parameter is the angle on the color wheel, typically in range (0, 360). The saturation parameter must be in range (0, 100). The percentage parameter specifies the strength of the effect, it must be in range (0, 100).

1![Image Colorize](/featured-sample.webp?colorize=-100,50,150)

Image Colorize

Contrast#

The contrast must be in range (-100, 100).

1![Image Contrast](/featured-sample.webp?contrast=50)

Image Contrast

Gamma#

Gamma creates a filter that performs a gamma correction on an image. The gamma parameter must be positive. Gamma = 1 gives the original image. Gamma less than 1 darkens the image and gamma greater than 1 lightens it.

1![Image Gamma](/featured-sample.webp?gamma=2)

Image Gamma

GaussianBlur#

Applies a gaussian blur to an image.

1![Image GaussianBlur](/featured-sample.webp?gaussianBlur=2)

Image GaussianBlur

Grayscale#

Grayscale creates a filter that produces a grayscale version of an image.

1![Image Grayscale](/featured-sample.webp?grayscale)

Image Grayscale

Hue#

Hue creates a filter that rotates the hue of an image. The hue angle shift is typically in range -180 to 180.

1![Image Hue](/featured-sample.webp?hue=90)

Image Hue

Invert#

Invert creates a filter that negates the colors of an image.

1![Image Invert](/featured-sample.webp?invert)

Image Invert

Pixelate#

Pixelate creates a filter that applies a pixelation effect to an image.

1![Image Pixelate](/featured-sample.webp?pixelate=8)

Image Pixelate

Saturation#

Saturation creates a filter that changes the saturation of an image.

1![Image Saturation](/featured-sample.webp?saturation=100)

Image Saturation

Sepia#

Sepia creates a filter that produces a sepia-toned version of an image.

1![Image Sepia](/featured-sample.webp?sepia=200)

Image Sepia

Sigmoid#

Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image. It’s a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.

1![Image Sigmoid](/featured-sample.webp?sigmoid=2,5)

Image Sigmoid

UnsharpMask#

UnsharpMask creates a filter that sharpens an image. The sigma parameter is used in a gaussian function and affects the radius of effect. Sigma must be positive. Sharpen radius roughly equals 3 * sigma. The amount parameter controls how much darker and how much lighter the edge borders become. Typically between 0.5 and 1.5. The threshold parameter controls the minimum brightness change that will be sharpened. Typically between 0 and 0.05.

1![Image UnsharpMask](/featured-sample.webp?unsharpMask=10,1,0.05)

Image UnsharpMask


  1. When using the Crop or Fill method, the anchor determines the placement of the crop box. You may specify TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, or Smart. The default value is Smart↩︎