Jekyll 图像和文本的不同宽度

Question

如果我的问题的答案似乎很明显，请原谅——我试着自己做，我四处寻找解决方案……不幸的是，我仍然被困住了。 :(

我希望为图片和文本设置不同的宽度，这样我的博客就可以显示大图片，同时保持合适的行长。

这很容易实现，前提是 Jekyll 没有将所有 <img> 包装在 <p> 标签中。无论我如何更改我的 CSS，它都无法解决问题。

前段时间在Stack Overflow上看到有人的post说解决方法是直接在Markdown文件中指定一个class。像这样：

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

它没有用，至少对我没有用——class 被应用到 <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 标签。文档中的示例与我的建议类似。您将在 /_includes/ 文件夹中有一个 image.html 文件，其中包含 <img> 标签、类以及图像所需的任何其他内容。您可以将图像 url 或文件位置作为参数传递给 include ，这样它将加载带有所有 your 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 标记嵌套在任何 Markdown 下，例如 ## header 或 - list，Jekyll 应该希望 只使用image.html直接放到输出里面，不加任何包围。

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

最坏的情况是完全从 Markdown 切换到 HTML。它使您可以完全控制输出，因为 Jekyll 不会插入它自己的包装标签。切换肯定会很麻烦，但从经验来说，我在 HTML 写自己的博客确实学到了很多东西。它确实帮助我了解网站的工作原理并成为更好的网络开发人员。

祝你好运！

Answer 2

图像上的负边距应该有效：

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

...或者像这样：

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

... 或检查此 post：

Jekyll 图像和文本的不同宽度

Different widths for images and texts with Jekyll

html

css

jekyll