Make sure .full negative margin sticks on images wrapped in <p></p>

This commit is contained in:
Michael Rose
2016-04-01 16:31:31 -04:00
parent 7db4724ddf
commit c9da12f79e
3 changed files with 18 additions and 4 deletions

View File

@@ -9,6 +9,20 @@ tags:
The preferred way of using images is placing them in the `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/images/{% endraw %}` will make sure your images display properly in feeds and such.
Standard image with no width modifier classes applied.
**HTML:**
```html
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="">{% endraw %}
```
**or Kramdown:**
```markdown
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg){% endraw %}
```
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg)
Image that fills page content container by adding the `.full` class with:
@@ -16,13 +30,13 @@ Image that fills page content container by adding the `.full` class with:
**HTML:**
```html
<img src="/images/filename.jpg" alt="" class="full">
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="" class="full">{% endraw %}
```
**or Kramdown:**
```markdown
{% raw %}![alt](/images/filename.jpg)
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg)
{: .full}{% endraw %}
```