如何在Jekyll中设置尺寸/旋转图像?

时间:2019-01-01 00:26:29

标签: html markdown jekyll github-pages

如何在jekyll markdown中设置图像大小?

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }})

我正在使用jekyll minima。使用

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }} =250x)
Changing image size in Markdown中的

不起作用。如果可能的话,我也想知道如何旋转图像。

3 个答案:

答案 0 :(得分:3)

Jekyll 似乎接受属性列表。您可以按如下方式设置图像的大小:

![steam-fish-1](/assets/steam-fish-1.jpeg){: width="250" }

(或使用 height="250")。属性值以像素为单位,并且应该(根据 HTML 规范)没有明确的单位。

答案 1 :(得分:1)

Markdown并没有内置对图像大小的支持,因此唯一真正的解决方案是在markdown内使用一些HTML。鉴于此,我的jekyll-image-size插件无需任何CSS即可调整大小。

示例:

<!-- template -->
{{ /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' }}

<!-- output -->
<a href="/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>

YYY是图像的实际比例缩放高度。)

如果您需要absolute_url过滤器:

<!-- template -->
<a 
  href={{ "/assets/steam-fish-1.jpeg" | absolute_url }} 
  {{ /assets/steam-fish-1.jpeg:props?width=250 }} 
  alt='steam-fish-1'
>

<!-- output -->
<a href="http://test.com/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>

要旋转图像,仅旋转图像文件本身有意义吗?

答案 2 :(得分:0)

如果无法在Jekyll生成的HTML代码中包含size / rotation属性(如illustrated here,请参见注释)...总会有CSS路由。

请参阅“ Resize image proportionally with CSS?”:您可以添加CSS样式表来设置图片的大小。甚至rotate it