如何在 jekyll 中设置大小/旋转图像？答案

【问题标题】：How to set size/rotate image in jekyll?如何在 jekyll 中设置大小/旋转图像？
【发布时间】：2019-05-28 06:33:45
【问题描述】：

如何在 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 不起作用。如果可能的话，我也想知道如何旋转图像。

【问题讨论】：

标签： html markdown jekyll github-pages

【解决方案1】：

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

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

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

【讨论】：

对我来说，这就是解决方案。像这样设置一个 CSS id，然后根据 CSS 更改 width 或 max-width。
在 Markdown 语句中添加 {: width="250" } 的最佳解决方案。工作正常！ @Cris Luengo

【解决方案2】：

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'>

对于旋转图像，仅旋转图像文件本身是否有意义？

【讨论】：

它对我不起作用。 jekyll-image-size 文档说你需要使用{% imagesize source:img %}，但是你使用{{ source:img }}。我错过了什么吗？

【解决方案3】：

如果无法在 Jekyll 生成的 HTML 代码中包含 size/rotation 属性（如 illustrated here，请参阅 cmets）...总会有 CSS 路由。

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

【讨论】：

谢谢！我不太明白如何在 Jekyll 中创建 CSS 文件？如果您能提供更具体的步骤，那就太好了。
@ZHU 当然可以，你可以从help.github.com/articles/…开始

【解决方案4】：

与jekyll-image-size，应该使用

<!-- template -->
{% imagesize /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'>

【讨论】：