Add .full image class for spanning the entire content container

_assets/css/_utilities.scss

@@ -128,6 +128,11 @@ body:hover .visually-hidden button {
   }
 }
 
+/* file page content container */
+
+.full {
+  max-width: 100% !important;
+}
 
 /*
    Icons

_includes/gallery

@@ -16,7 +16,7 @@
   {% assign gallery-layout = '' %}
 {% endif %}
 
-<figure class="{{ gallery-layout }}">
+<figure class="{{ gallery-layout }} {{ include.class }}">
   {% for img in gallery %}
     {% if img.url %}
       <a href=

_posts/2010-08-05-post-image-standard.md

@@ -10,3 +10,21 @@ 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 %}` well make sure your images display properly in feeds and such.
 
 ![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg)
+
+Image that fills page content container by adding the `.full` class with:
+
+**HTML:**
+
+```html
+<img src="/images/filename.jpg" alt="" class="full">
+```
+
+**or Kramdown:**
+
+```markdown
+{% raw %}![alt](/images/filename.jpg)
+{: .full}{% endraw %}
+```
+
+![Unsplash image 10]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-10.jpg)
+{: .full}

_posts/2010-09-09-post-gallery.md

@@ -86,6 +86,6 @@ And place it like so:
 
 {% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}
 
-And for giggles one more gallery just to make sure this works.
+And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`.
 
-{% include gallery id="gallery3" caption="This is a third gallery example with two images." %}
+{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}