让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

我认为戴维斯的回答非常好。但是，如果使用jQuery解决这个问题没有问题，可以这样做：

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

这样你的减价将保持清洁。

Answer 2

我知道您正在写下你的帖子/页面。

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

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 3

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

line

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

line

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