Question

如果我的问题的答案似乎很明显，请原谅。我自己尝试这样做，我四处寻找解决方案……但是，不幸的是，我仍然陷于困境。：（

我正在为图像和文本设置不同的宽度，因此我的博客可以显示大图片，同时保持宜人的行长。

仅当Jekyll未将所有<img>包装在<p>标记中时，这才容易实现。无论我如何更改CSS，它都不会成功。

不久前，我在Stack Overflow上发现某人的帖子，指出解决方案是直接在Markdown文件中指定一个类。像这样：

[image-1]: {{ site.baseurl }}/images/lostcrow.jpg "A beautifully lost crow" {: .classy }

这是行不通的，至少对我来说不行，该类应用于<img>标记，而不是<p>标记：

<p><img class="classy" src="/images/lostcrow.jpg" alt="A beautifully lost crow" title="Lost Crow" /></p>

所以图像的宽度仍然取决于文本的宽度...

请问，有没有一种方法可以用Jekyll为图像和文本设置不同的宽度？非常感谢您的指导。

感谢您的宝贵时间。：）

Answer 1

我对Jekyll如何处理Markdown + HTML不太了解，但是仅将图像从Markdown切换到HTML是一种可能的解决方案。

The Jekyll Docs有一个很好的示例，将参数传递给Jekyll中的include标签。文档中的示例与我所建议的相似。您将在image.html文件夹中拥有一个/_includes/文件，其中包含<img>标记，类以及其他图像所需的文件。您可以将图片网址或文件位置作为参数传递给include，以便它将使用所有您的 HTML加载图片，而不是Jekyll处理图片并添加自己的HTML。像下面这样的东西会起作用：

# /_includes/image.html
<img src="{{ include.src }}" alt="{{ include.alt }}" title="{{ include.title }}" />


# in some other file where you want to add an image
{% include image.html src="..." alt="..." title="..." %}

如果您没有将include标记嵌套在## header或- list之类的Markdown下，那么Jekyll 希望只需使用image.html并直接将其放入输出中，而不会被任何东西包围。

您还可以添加其他参数，例如height={{ include.height }} width ={{ include.width }}来手动设置高度/宽度。

最坏的情况是将Markdown完全转换为HTML。由于Jekyll不会插入其自身的包装标签，因此您可以完全控制输出。切换绝对是一件麻烦事，但是从经验上来讲，我绝对会从HTML编写自己的博客中学到很多东西。它无疑帮助我了解了网站的工作方式并成为了一个更好的Web开发人员。

祝你好运！

Answer 2

图片上的负空白应该起作用：

.classy {margin: 0 -100px; width: calc(100% + 200px);}

...或类似这样：

p img {margin: 0 -100px; width: calc(100% + 200px);}

...或查看此信息：Making Jekyll img's wider than the text?

Jekyll提供不同的图像和文本宽度

2 个答案: