Making Jekyll img's wider than the text?

Question

For my Jekyll blog, I want the images to span the whole width of the column, while having padding on either side of the text, like this: http://www.webdesignerdepot.com/2015/05/

Answer 1

You can also choose to create an HTML block. This is done by wrapping an img tag in a div like this:

line

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

line

No clean markdown, but a pretty clean solution nevertheless. Found the solution here.

Answer 2

I think Davids answer is really good. However, if you have no problem solving this with jQuery, you can do this:

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

That way your markdown will stay clean.

Answer 3

I understand that you are writing your post/page in markdown.

In order to apply a specific style to the P container you can use kramdown block attributes to set a class on it.

Some test

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

Will render as

<p>Some test</p>

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

You can then style .imgContainer.