1.9 KiB
1.9 KiB
layout | title | category | tags | |||
---|---|---|---|---|---|---|
post | A Post with Images | articles |
|
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use figure
with the appropriate class
. Each instance of figure
is auto-numbered and displayed in the caption.
Figures (for images or video)
One Up
![](http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg)
Two Up
Apply the half
class like so to display two images side by side that share the same caption.
<figure class="half">
<img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg">
<figcaption>Caption describing these two images.</figcaption>
</figure>
And you'll get something that looks like this:
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
Three Up
Apply the third
class like so to display three images side by side that share the same caption.
<figure class="third">
<img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg">
<img src="/images/image-filename-3.jpg">
<figcaption>Caption describing these three images.</figcaption>
</figure>
And you'll get something that looks like this:
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)