html - 如何正确缩放 Jekyll 博客摘录中的特色图像？

Question

我正在使用 Jekyll 在一页上收集博客摘录。一个问题是摘录中的特色图像通常是从原始图像中拉伸(stretch)出来的。我认为这是因为摘录中的特色图像的默认设置始终固定为 300px * 100px 大小。如何缩放特色图像而不是在摘录中使用固定大小，同时确保图像的大小不大于默认大小？

具体来说，我使用以下代码在我的 post.html 模板中生成博客摘录:

<header><h4><a href="{{ post.url }}">{{ post.title }}</a></h4></header>
<p><span>{{ post.subtitle }}</span></p>
<p style="font-style:italic"> {{ post.date | date_to_string }}</p>
{% if site.pageviews %}
<p style="font-style:italic"> pageviews: {{ post.pageviews }} </p>
{% endif %}
<article>
<div class="excerpt">
{{ post.content | strip_html | truncate:400  }}
</article>

此功能会自动抓取博客中的第一张图片作为特色图片，并将其显示在摘录段落中。我找不到 Liquid 中控制特色图像大小的位置...谢谢。

5 月 31 日更新: 仓库是here 。请参阅最新帖子的图像和图像摘录:http://iciq.github.io 。我通过在帖子中图像的 css 样式中定义“scale”属性而不是 width 属性来解决此问题。但仍然对更优雅的解决方案持开放态度。

Answer 1

如上所述，该问题可能是 CSS 问题。

您可以在 Markdown 文件中以多种方式设置图像样式。首先通过使用 HTML 语法或 kramdown 语法，可能还有更多...

如果您选择使用 kramdown，则需要在 _config.yml 文件中进行配置。

markdown: kramdown

//然后在 markdown 文件上使用:

  Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}