本文提供一些調整圖片大小和對齊圖片的用例。
調整圖片大小#
我們利用 URL 的查詢字符串來調整圖片大小。
指定寬度和保留比率#
1
指定高度和保留比率#
1
指定寬度和高度#
1
它不僅可以用於頁面資源,而且也適用於 static 圖像和外部圖像。 但是,除了頁面資源外,其他資源的大小都是按內聯樣式調整的,也就是說,它們的原始大小不會改變。
對齊圖像#
我們可以利用 URL 片段輕易地對齊圖像,比如:#center
, #floatleft
和 #floatright
分別表示居中對齊、向左浮動和向右浮動。
居中對齊#
添加 #center
使圖片居中對齊。
舉個例子:
。
向左浮動#
添加 #floatleft
使圖片向左浮動。
舉個例子:
。
向右浮動#
同樣的,我們也可以添加 #floatright
使圖片向右浮動。
舉個例子:
。
Caption#
HBS 允許使用圖片標題作為 caption,但這個功能默認是關閉的,你需要啟用 post.imageTitleAsCaption
參數:
1[post]
2 imageTitleAsCaption = true
1post:
2 imageTitleAsCaption: true
1{
2 "post": {
3 "imageTitleAsCaption": true
4 }
5}
1
評論