如何在jekyll中设置图片的大小和旋转？

Question

如何在 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)

来自在Markdown中更改图像大小无法工作。如果可能，我也想知道如何旋转图像。

- ZHU

Answer 1

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

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

（或使用height="250"）。属性值以像素为单位，根据HTML规范，不应具有显式单位。

- Cris Luengo

---

对我来说，这是解决方案。设置CSS ID如下，然后通过CSS更改width或max-width。 - Mario Codes

对我来说，将 {: width="250" } 添加到 Markdown 语句中是最好的解决方案。运行良好！@Cris Luengo - Hans Ratzinger

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

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

- Shane Brinkman-Davis

---

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

Answer 3

如果无法在Jekyll生成的HTML代码中包含大小/旋转属性（如此处所示，请参见评论）...则总有CSS路线。

请参见“使用CSS等比例调整图像大小？”：您可以添加CSS样式表来设置图片的大小。甚至旋转它。

- VonC

---

谢谢！我不太明白如何在Jekyll中创建CSS文件？如果您能提供更具体的步骤，那就太好了。 - ZHU

@ZHU 当然，你可以从 https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/ 开始。 - VonC

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

- sbkm

---

这只能在模板中完成，而不能在 Markdown 内容中实现。 - Matt Sephton

这只能在模板中完成，而不能在标记内容中完成。 - undefined

Answer 5

像这样

![Load](/blog/assets/images/blog/grpc/csharp2.png){:width="100%"}

- Christian Findlay