本文提供一些調整圖片大小、裁剪和對齊圖片的用例。
調整圖片大小§
我們利用 URL 的查詢字符串來調整圖片大小。
指定寬度和保留比率§
1![Resize](featured-sample.webp?width=300px)
指定高度和保留比率§
1![Resize](featured-sample.webp?height=200px)
指定寬度和高度§
1![Resize](featured-sample.webp?width=300px&height=200px)
它不僅可以用於頁面資源,而且也適用於 static 圖像和外部圖像。 但是,除了頁面資源外,其他資源的大小都是按內聯樣式調整的,也就是說,它們的原始大小不會改變。
對齊圖像§
我們可以利用 URL 片段輕易地對齊圖像,比如:#center
, #float-start
和 #float-end
分別表示居中對齊、向左浮動和向右浮動。
居中對齊§
添加 #center
使圖片居中對齊。
舉個例子:![Center](/featured-sample.webp#center)
。
向左浮動§
![Float Start](https://deploy-preview-804--hbs-docs.netlify.app/zh-hant/docs/image-processing/featured-sample_huc6bcc14d597e300fd9ab4aae536c68a5_498412_0x120_resize_q75_h2_box_2.webp)
添加 #float-start
使圖片向左浮動。
舉個例子:![Float Start](/featured-sample.webp#float-start)
。
向右浮動§
![Float End](https://deploy-preview-804--hbs-docs.netlify.app/zh-hant/docs/image-processing/featured-sample_huc6bcc14d597e300fd9ab4aae536c68a5_498412_0x120_resize_q75_h2_box_2.webp)
同樣的,我們也可以添加 #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")
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 | ||
---|---|---|
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
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 | ||
---|---|---|
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
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])
Filters§
Brightness§
The brightness
must be in range (-100, 100)
.
1![Image Brightness](/featured-sample.webp?brightness=-30)
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)
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)
Contrast§
The contrast
must be in range (-100, 100)
.
1![Image Contrast](/featured-sample.webp?contrast=50)
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)
GaussianBlur§
Applies a gaussian blur to an image.
1![Image GaussianBlur](/featured-sample.webp?gaussianBlur=2)
Grayscale§
Grayscale creates a filter that produces a grayscale version of an image.
1![Image Grayscale](/featured-sample.webp?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)
Invert§
Invert creates a filter that negates the colors of an image.
1![Image Invert](/featured-sample.webp?invert)
Pixelate§
Pixelate creates a filter that applies a pixelation effect to an image.
1![Image Pixelate](/featured-sample.webp?pixelate=8)
Saturation§
Saturation creates a filter that changes the saturation of an image.
1![Image Saturation](/featured-sample.webp?saturation=100)
Sepia§
Sepia creates a filter that produces a sepia-toned version of an image.
1![Image Sepia](/featured-sample.webp?sepia=200)
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)
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)
評論