让 Jekyll img 比文本更宽？

Question

对于我的 Jekyll 博客，我希望图像跨越整个列的宽度，同时在文本的两边填充，如下所示：http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation

我遇到的主要问题是 Jekyll 将图像包装在 <p> 标签中，因此（据我所知）无法针对没有段落而不是段落的图像宽度。

<p>
  "Some text."
</p>
<p> <img src="#"> </p>

您建议如何解决这个问题？

Answer 1

我了解到您正在用 markdown 编写 post/page。

为了将特定样式应用于 P 容器，您可以使用 kramdown block attributes 在其上设置 class。

Some test

![Alt text](/path/to/img.jpg)
{: .imgContainer}

将呈现为

<p>Some test</p>

<p class="imgContainer"><img src="/path/to/img.jpg" alt="Alt text" /></p>

然后您可以设置样式 .imgContainer。

Answer 2

我觉得大卫的回答非常好。然而，如果你用 jQuery 解决这个问题没有问题，你可以这样做：

$('.content > p > img').parent().css('padding','0');

这样你的降价将保持干净。

Answer 3

您还可以选择创建一个 HTML 块。这是通过将 img 标签包装在 div 中来完成的，如下所示：

line

<div><img src="image.jpg" /></div>

line

没有干净的降价，但仍然是一个非常干净的解决方案。找到解决方案 here.

Making Jekyll img's wider than the text?