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

Posted 2023-03-15

【中文标题】如何在 jekyll 中设置大小/旋转图像？

【英文标题】：How to set size/rotate image in 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 不起作用。如果可能的话，我也想知道如何旋转图像。

【参考方案1】：

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

![steam-fish-1](/assets/steam-fish-1.jpeg):  

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

【讨论】：

对我来说，这就是解决方案。像这样设置一个 CSS id，然后根据 CSS 更改 width 或 max-width。

在 Markdown 语句中添加 : 的最佳解决方案。工作正常！ @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'>